Understand JavaScript splice method

In this article, we learn how to add, remove and replace elements from an array using the JavaScript splice method. The splice method takes a minimum of 1 argument that is the start index where it starts adding or removing the items.

 

In day-to-day development, you come across this situation when you have to manipulate array elements. Suppose you have one array that contains the list of products now you want to remove one product from that product array then you can use the JavaScript splice method.

Remove element from an array using JavaScript splice() method –

To remove an array element you must know the index of that element that you wish to remove. Suppose if pass 2 in splice() method that means you remove the element that exists at index 2.

Syntax –

array.splice(startindex, removeCount, newItem, newItem, ...)

Start index – Start position where you want to remove or add the element.

Removecount – Number of array items you want to remove from the start index.

New item – New items to be added to the array.

Example –

Suppose we have below array –

const products = ["MacBook", "iPad", "iPhone", "iWatch", "PS4"];
const finalproducts =  products.splice(2,1);
console.log(finalproducts);
//Output - ['iPhone']
console.log(products);
//Output - ['MacBook', 'iPad', 'iWatch', 'PS4']

This removes the element from the 2^nd index of an array since the array index starts from 0 so the element “iPhone” is removed from the array. The (2, 1) means removing an element from index 2 and removing 1 element.

the 2^nd console.log statement shows the actual array and its remaining items.

Now let’s take one more example to remove multiple elements from the array using the JavaScript splice() method.

let products = ["MacBook", "iPad", "iPhone", "iWatch", "PS4"];
let prodarr = products.splice(2,2);
console.log(prodarr);

Output
//["iPhone", "iWatch"]

console.log(products);

Output
//["MacBook", "iPad", "PS4"]

It removes 2 elements from the array because we pass the remove count as 2. Internally what happened first was it removed the element at index 2 and then the index shift one position forward so the 3^rd index element become the 2^nd index and it gets deleted as well.

Add the element to the array using the JavaScript splice() method –

Now let’s understand how to add the element in between the array using the JavaScript splice() method. Suppose we have the below array and need to add some product items in the array at index 2.

let products = ["MacBook", "iPad", "iPhone", "iWatch", "PS4"];
let finalproducts = products.splice(2,0, “iPod”, “EarBuds”);
console.log(finalproducts);

Output -
//["MacBook", "iPad", “iPod”, “EarBuds”,"iPhone", "iWatch", "PS4"]

This adds the two elements in the array at the starting index of 2. It adds operation so I pass 0 in remove count.
Let see one more example to add a remove an element from an array in one line of code.

Add remove the element from an array using the JavaScript splice() method

Below I add and remove elements from the array in a single line of code.

const products = ["MacBook", "iPad", "iPhone", "iWatch", "PS4"];
console.log(products.splice(2,2, “iPod”, “EarBuds”));

This removes and adds two elements from the array and below is the output.

Output
//["MacBook", "iPad", “iPod”, “EarBuds, "PS4"]

Note – The JavaScript splice() method returns the new array of added or removed items from the existing array.

 

Replace existing items with new ones using the JavaScript splice() method

In the above code example, you learn how to add or remove items from the array using the splice() method now in this sample I show you how to replace the existing items with new items.

To perform replace operation you have to pass at least 3 arguments in an array splice method. The start index and the one you want to delete and the new one you want to add.

let products = ["MacBook", "iPad", "iPhone", "iWatch", "PS4"];
let arrproducts = products.splice(3,1, “GoPro”)
console.log(arrproducts);
Output
// ['iWatch']

Output
// ['MacBook', 'iPad', 'iPhone', 'GoPro', 'PS4']

 

Conclusion

This is how you can add, remove and replace items from the array using the JavaScript splice() method. This method is commonly used for array items manipulation.