JavaScript Array Splice: Step by Step Guide

The splice() method lets you change the item of your array by removing or replacing the existing items with new ones.

JavaScript array splice

JavaScript array splice() is a built-in method that changes the elements of an array by removing or replacing the existing items and/or adding new elements. The splice() method adds/removes items to/from an array and returns the removed item(s).

The JavaScript splice() method returns a new array. In the splice method, if you specify a different number of the item to insert than the number you’re removing, then the array will have a different length at the end of the call.

Syntax

array.splice(index, howmany, item1, ....., itemX)

Parameters

The first parameter is an array index, which means where to start adding or removing the item.

The second parameter is howmany means from the start index how many indexes we need to cover from the starting index.

The last parameters are optional. If we specify, it will add the items on the array at specifying the starting index.

Example

// app.js

let tesla = ['Model S', 'Model X', 'Model 3'];
let removedItem = tesla.splice(1, 1, 'Roadster');

console.log('Remaining array:', tesla);
console.log('removedItem is:', removedItem);

So, here we have defined one array, and then we are changing that array by providing the first argument as a starting point of an index of 1. So it will look for index 1, which is Model X. Now, the second parameter is also 1.

So it will be the length of how many indexes we need to go to the right side of an array. So in our case, it is still Model X. The third parameter, Roadster, will replace the Model X.

Javascript Array Splice Example | Array.prototype.splice() Tutorial

If we do not specify the third or fourth argument, it will remove the item from an array. It will take as removing an item from the array.

If you are a Javascript developer, you must use the splice() method to remove the data based on ID. We do lots of this on a framework like Angular, React, or Vue.js.

// app.js

let tesla = ['Model S', 'Model X', 'Model 3'];
let removedItem = tesla.splice(1, 1);

console.log('Remaining array:', tesla);
console.log('removedItem is:', removedItem);

That means the Model X will be removed from an array, and we get the remaining array.

Javascript Array Splice Example

Don’t specifying second argument

Let us see the scenario where we do not also determine the second argument.

// app.js

let tesla = ['Model S', 'Model X', 'Model 3'];
let removedItem = tesla.splice(1);

console.log('Remaining array:', tesla);
console.log('removedItem is:', removedItem);

If we do not specify the second argument, it will take the first one, find that index, and remove that item and other items.

So in the above example, we have given the index 1, which means it will go to index 1 and remove all the items from that index and give the remaining item. In our case, it is the Model S.

Array.prototype.splice() Tutorial

Starting index is negative(-)

Let us take a scenario where an array’s starting index is negative. That means it will count backward at the end of an array.

// app.js

let tesla = ['Model S', 'Model X', 'Model 3'];
let removedItem = tesla.splice(-1);

console.log(tesla);
console.log(removedItem);

The above example will start backward and remove the first item from the backward point of view. In our case, it is Model 3. So it will remove that, and if we check the Tesla array, we only have two elements in the array now.

Splice method in Javascript

JavaScript splice() vs slice()

The splice() method is similar to Array.prototype.slice, but unlike the slice() method, it mutates the array it is called on. It also differs because it can be used to add values to an array and remove them.

That’s it for this guide.

See also

Javascript array indexOf()

Javascript array lastIndexOf()

Javascript array findIndex()

Javascript array reverse()

Javascript array isArray()

1 thought on “JavaScript Array Splice: Step by Step Guide”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.