JS: splice() Method

The js<span style="color:#cf2e2e" class="tadv-color">splice()</span> method is like the slice() method and extract/remove or change/add new specified elements from/to an array. This method changes the original array.

The js splice method takes three parameters – start index, number of elements to removed/added, and items that need to added.

array.splice(index, how many to add/remove, item1, ... item n)

Index – This parameter tells where to start removing or adding elements in the array. If you want to remove elements from the end of the array use negative value.

No of Elements – This parameter is about number of element to be removed from or replaced/added to the array.

[Item1 .. item n] – If you want to add elements to the array and know the index and number of elements , then this parameter requires you to put the items that you want to add.

In this article, we will see examples of splice() method that manipulate a simple array.

Removing Elements Using splice()

To remove elements from array we need to provide the start index and the number of characters to remove.

Consider the following example.

//declare the array 
myArray = ["red", "blue", "green", "yellow", "pink"];

//remove two elements from position 1
result = myArray.splice(1,2);
document.body.innerHTML = result

The output of the above script is given below.

green, yellow

The index value of “green” is 1 and two items are removed. Let’s find the status of the original array.

document.body.innerHTML = myArray

The output is <span style="color:#cf2e2e" class="tadv-color">red,yellow,pink.</span>

The original array is modified successfully.

Adding An Element Using splice()

The js<span style="color:#cf2e2e" class="tadv-color">splice() </span>method is also used for adding elements in a JavaScript array. To add elements you need to enter the index position, 0 (to represent no number are being replaced), the value you want to insert.

Consider the following example.

//list of beverages 
myArray = ["tea", "coffee", "juice", "wine"];

//now we want to add beer
myArray(1,0,"beer");
console.log(myArray);

In the above script, the new value “beer” is inserted at position <span style="color:#cf2e2e" class="tadv-color">1</span>, no element is replaced, and item is ‘beer‘. Let’s look at the output value.

["tea", "beer", "coffee", "juice", "wine"]

Replacing Elements In An Array

Replacing elements of an existing array is similar to adding a new element using splice() method.

The only difference is that you have to specify how many elements you want to replace. See the example below.

//list of beverages 
myArray = ["tea", "coffee", "juice", "wine"];

//now we want to add beer and replace 'wine'
myArray(3,1,"beer");
console.log(myArray);

The output shows that we have one more parameter this time – number of elements to replace.

["tea", "coffee", "juice", "beer"]

Removing Elements From End Of The Array

Most of the things you can do which positive index of splice() method. However, the splice() method also supports all operations using negative index. It means you can specify position within array using negative index value.

//list of beverages 
myArray = ["tea", "coffee", "juice", "wine"];

//now we want to delete the last element having index -1
myArray.splice(-1,1);
console.log(myArray);

The output of the above is as follows.

["tea", "coffee", "juice"]

The last item has the index of -1 and the second last has -2 and so on. The splice() method is removes one element from the end as a result the entry<span style="color:#cf2e2e" class="tadv-color"> "wine"</span> is removed.