How to insert an item into an array at a specific index in JavaScript?

There are many ways and hacks to insert an item into a specific index in JavaScript array. But the question is how we can effectively do it with less code?

To add an item into JavaScript array, we are going to use JavaScript Array.splice() method. Let’s see an example on how it works?

const arr = ['apple', 'orange', 'cherry'];
const item = 'pineapple'

arr.splice(2, 0, item);
console.log(arr);

// OUTPUT
// ['apple', 'orange', 'pineapple', 'cherry']

Let’s dig deeper on how splice() method works? and how the function parameter make any difference?

array splice() parameters

Let’s analyze all the parameters for splice(start, deleteCount, item)

  • start – which array index to start inserting into
  • deleteCount – integer to count how many elements to remove from array starting from start index
  • item – which item to insert into array

Let’s see few more example to fully understand how splice() works?

how to insert item into specific array index without removing any elements?

We have already seen all the parameters used for splice() method and know what each parameter does? So let’s see how we can use them?

const arr = ['apple', 'orange', 'cherry'];
const item = 'straberry'

arr.splice(1, 0, item);
console.log(arr);

// OUTPUT
// ['apple', 'straberry', 'orange', 'cherry']

In above example, splice(1, 0) we are saying we need to insert ‘straberry’ into array index 1, and 0 essentially means we don’t want any or zero items in array to be removed.

As result our ['apple','orange','cherry'] becomes ['apple','straberry','orange','cherry'].

how to insert item into specific array index and remove specific item/items?

What if we want to insert an item into array and remove some other items in specific array position?

To remove or replace existing array item by inserting new one we would still use splice() method. Here is how it’s been done?

const arr = ['apple', 'orange', 'cherry', 'pineapple'];
const item = 'straberry'

// insert at index 1, remove 2 items from index 1
arr.splice(1, 2, item);
console.log(arr);

// OUTPUT
// ['apple', 'straberry', 'pineapple']

In above example we used splice(1, 2).

  • The first parameter(1) we are saying to insert ‘starberry’ at array at index 1
  • The second parameter(2) we are trying to remove 2 items from array, starting from index 1

In this case, we have 'orange' at index 1, and we are removing 2 items starting from index 1. which means remove ‘orange’ at index 1 and next remove ‘cherry’ at index 2, then insert ‘straberry’ at index 1.

As result our ['apple','orange','cherry','pineapple'] becomes ['apple','straberry','pineapple']

Let’s see few more exampleS to fully grasp how splice() method works?


const arr = ['apple', 'orange', 'cherry', 'pineapple'];
const item = 'straberry'

// insert at index 1, remove 1 item from index 1
arr.splice(1, 1, item);
console.log(arr)

// OUTPUT
['apple', 'straberry', 'cherry', 'pineapple']

const arr = ['apple', 'orange', 'cherry', 'pineapple'];
const item = 'straberry'

// insert at index 1, remove 3 items from index 1
arr.splice(1, 3, item);
console.log(arr)

// OUTPUT
// ['apple', 'straberry']
%d bloggers like this: