Add Element to Array at specific Index in JavaScript

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.

Copied!
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 are 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

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.

Copied!
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).

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

Copied!
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 (...).

Copied!
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.

Further Reading #

• Find the Odd Numbers in an Array using JavaScript
• Find the Even numbers in an Array using JavaScript
• Get a random Element from an Array using JavaScript
• Get Multiple Random Elements from an Array in JavaScript
• Add Array of Values to an Existing Set in JavaScript
• Create a Map from an Array using JavaScript
• Check if a Value is NOT in an Array using JavaScript
• How to Flatten an Array using JavaScript
• Convert an Array to JSON using JavaScript
• Create an Object from Two Arrays in JavaScript
• Convert an Object to an Array of Objects in JavaScript
• Convert an Array of Objects to a Map in JavaScript