Add Element To Array At Specific Index In JavaScript

To add element to array at specified index in JavaScript, you can use the splice() method, eg – arr.splice(1,0,’a’). The splice() method changes the contents of an array by removing or adding elements.

add element to array at specific index in JavaScript

Add Element To Array At Specific Index In JavaScript

splice() method in JavaScript takes 3 arguments. The first argument is the index where you want to start changing the array. The second argument is the number of elements you want to remove. The third and subsequent arguments are elements you want to add to the array in place of the removed elements.

Here is the code to insert “drum” at index 2 in the array –

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

myFish.splice(2, 0, 'drum'); 

console.log(myFish);

// myFish is ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'] 

If you use 0 as the second argument (the number of elements to remove), the splice() method will only insert elements.

Here is the code to insert “parrot” and “anemone” at index 2 in the array –

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

myFish.splice(2, 0, 'parrot', 'anemone'); 

console.log(myFish);

// myFish is ['angel', 'clown', 'parrot', 'anemone', 'mandarin', 'sturgeon']

You can add and delete elements at the same time using the splice() method.

Here is the code to delete 1 element at index 2, and insert “drum” and “guitar” at the same time –

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

myFish.splice(2, 1, 'drum', 'guitar'); 

console.log(myFish);

// myFish is ['angel', 'clown', 'drum', 'guitar', 'sturgeon'] 

If you use a negative number as the first argument of splice(), the elements will be added or removed from the end of the array, rather than the beginning.

For example, -1 is the last index of the array, -2 is the second-to-last index, and so on.

Here is the code to add element “opossum” at the end of the array –

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

myFish.splice(-1, 0, 'opossum'); 

console.log(myFish);

// myFish is now ['angel', 'clown', 'mandarin', 'opossum', 'sturgeon']

You can also delete elements from the end of the array by using a negative value as the second argument.

For example, -1 is the last index of the array, -2 is the second-to-last index, and so on.

Here is the code to remove the last element of the array –

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

myFish.splice(-1, 1); 

console.log(myFish);

// myFish is now ['angel', 'clown', 'mandarin']

You can also use splice() to copy elements from one array to another.

To do this, you can use the same method, but with a different first argument.

The first argument is the index of where you want to start copying elements to.

For example, if you have two arrays –

var arr1 = ['a', 'b', 'c'];

var arr2 = ['d', 'e', 'f'];

And you want to copy elements from arr1 to arr2, starting at index 1 of arr2, you can use the following code –

var arr1 = ['a', 'b', 'c'];

var arr2 = ['d', 'e', 'f'];

arr2.splice(1, 0, ...arr1); 

console.log(arr2);

// arr2 is now ['d', 'a', 'b', 'c', 'e', 'f']

Note that the … (spread) operator is used to unpack the values of the array into individual values.

Conclusion – Add Element To Array At Specific Index In JavaScript

In this article, you have learned how to use the splice() method to add element to array at specific index in JavaScript. You have also learned how to use the spread operator to copy elements from one array to another.

Leave a Reply