Add Element into an Array at specific Index in JavaScript

avatar

Borislav Hadzhiev

Mon Oct 11 20213 min read

Add Element into an Array at specific Index #

Use the splice() method to add an element into an array at a specific index. The method changes the contents of an array by removing, replacing or adding new elements, starting at a supplied index.

index.js
const arr = ['a', 'c']; arr.splice(1, 0, 'b'); // ๐Ÿ‘‡๏ธ ['a', 'b', 'c'] console.log(arr);

The parameters we pass to the Array.splice method are:

  1. the start index - the index at which to start changing the array
  2. the delete count - how many elements to be deleted from the array, from the start index onwards
  3. the element(s) we want to add to the array, starting at the start index
Indexes are zero-based in JavaScript, so the first element in the array has an index of 0 and the last an index of arr.length - 1.

What might seem confusing to you is:

"Why are we providing a delete count parameter when adding an element to the array?".

The splice method is used to do 3 very different things.

  1. Remove elements from an array starting at a specific index.
  2. Replace elements in an array starting at a specific index.
  3. Add elements to an array starting at a specific index.

Here's the same example, using named variables to make this a little more readable.

index.js
const arr = ['a', 'c']; const startIndex = 1; const deleteCount = 0; const elementToInsert = 'b'; arr.splice(startIndex, deleteCount, elementToInsert); // ๐Ÿ‘‡๏ธ ['a', 'b', 'c'] console.log(arr);

We start changing the array at index 1, delete 0 elements and add an element with the value of b at the start index (1).

The splice method returns an array containing the deleted elements, however because we set the second parameter (delete count) to 0 it would return an empty array.

We can also insert more than 1 element, starting at the supplied index.

index.js
const arr = ['a']; arr.splice(1, 0, 'b', 'c'); // ๐Ÿ‘‡๏ธ ['a', 'b', 'c'] console.log(arr);

In this example we add the elements with values b and c in the array, starting at index 1.

The elements will be added in the order they were provided to the splice method, meaning b will be at index 1 and c will be at index 2.

If you have an array containing the elements you want to add starting at the specified index, you can use the spread operator (...).

index.js
const arr = ['a']; const elements = ['b', 'c']; arr.splice(1, 0, ...elements); // ๐Ÿ‘‡๏ธ ['a', 'b', 'c'] console.log(arr);

An easy way to think about the spread operator (...) is that we are unpacking the values from the array and passing them as multiple comma-separated arguments to the splice method.

I couldn't tell you why they thought it would be a good idea to use the same method to replace, remove and add elements to an array.

Personally I would have preferred to have 3 separate methods, because every time you look at the splice method it takes you a couple of seconds to remember the order of the parameters and to determine how it is used. Are we adding / removing or replacing elements here.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee