AppDividend
Latest Code Tutorials

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

0

Javascript Array Splice Example | Array.prototype.splice() Tutorial is today’s topic. The splice() method changes the items of an array by removing or replacing the existing items and/or adding new itemsThe javascript splice() method adds/removes items to/from an array, and returns the removed item(s). It will return a new array. In the splice method, if you specify the different number of the item to insert than the number you’re removing, then the array will have the different length at the end of the call.

If you want to learn more about the latest Javascript tutorials then check out this The Complete Javascript Course 2018.

Javascript Array Splice Example

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

Now, let us see the syntax of javascript array splice() method.

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

So here the first parameter is the index of an array which means where to start the adding or to remove the item. The second parameter is howmany means from start index how many indexes we need to cover from starting index. Then the last parameters are optional. If we specify, then it will add the items on the array at specifying starting index.

Let us take a simple example by creating a file called app.js and add the code.

// 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 which is 1. So it will look for index 1 which is Model X. Now the second parameter is also 1. So it will be a 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. So the third parameter Roadster will replace the Model X.

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

 

Now, if we do not specify the third or fourth argument, then it will remove the item from an array. It will take as a removing an item from the array. If you are a Javascript developer then you must have to use the splice() method to remove the data based on ID. We do lots of these stuff 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

 

If we do not specify the second argument

Let us see the scenario, where we do not determine the second argument as well.

// 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, then it will take the first argument and find that index and remove that item and other items from that index. So in the above example, we have given the index 1 which means it will go to index 1 and start removing all the items from that index and give the remaining item. In our case, it is the Model S.

 

Array.prototype.splice() Tutorial

If the starting index is negative(-)

Now, let us take a scenario, where the starting index of an array 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);

In the above example, it 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, then we only got two items in the array now.

Splice method in Javascript

 

Finally, Javascript Array Splice Example | Array.prototype.splice() Tutorial is over.

Leave A Reply

Your email address will not be published.

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