The Most Powerful Array Method : Splice

Splice is one of the most powerful methods of Array. We can achieve following things using splice method :

• Remove element/s from a specified index of an array
• Replace element/s from an array ( Remove + Insert )
• Insert element/s to an array

In short, splice method mutates the original array.

Take a look at syntax :

splice(start, deleteCount, item1, item2, itemN)

Note : Except start all others are optional )

To understand this we will directly jump into examples.

Removing Elements from an Array

Example - 1

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers.splice(2);
console.log(' result - 1 ', numbers);   // [1, 2]

• What splice method does here is it removes all the other elements from the specified index ( i.e start as specified in syntax )

• Now there are four possibilities : start - index might be +ve , -ve , zero , index out of bound

Example - 2

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers.splice(0);
console.log(' result - 1 ', numbers);   // []

• Basically splice method removes all the elements from index 0.
• That means ultimately it removes all the elements from the array.
• We can conclude that we can empty the array using splice method.

Example - 3

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers.splice(-2);
console.log(' result - 1 ', numbers);   // [1, 2, 3, 4, 5, 6, 7]

• When start index is specified -ve then splice method removes all the elements from the end of that array.

Example - 4

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers.splice(20);
console.log(' result - 1 ', numbers);   // [1, 2, 3, 4, 5, 6, 7, 8, 9];

• When start index is specified greater than or equal to length of the array then no element is removed.

---

Removing N no. of Elements from an Array

splice(start, deleteCount)

• Now along with the index from where we can start removing elements, we can specify exactly how many elements can be removed with the deleteCount as specified in the syntax.
• Note that it's an optional.
• Now we will take a look at the examples so that we can get an idea of it

Example - 5

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers.splice(3,2);
console.log(' result - 1 ', numbers);   // [1, 2, 3, 6, 7, 8, 9]

• Here in the above example splice method will start removing 2 elements (2 - deletecount) from the start index i.e 3

---

Replacing Elements from an Array

splice(start, deleteCount, item1, item2, itemN)

• We can replace the elements from an array i.e inserting and removing the elements simultaneously.
• Take a look at following example you can clearly understand this

Example - 6

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers.splice(3,2, "a", "b", "c");
console.log(' result - 1 ', numbers);   // [1, 2, 3, 'a', 'b', 'c', 6, 7, 8, 9]

• Here, in the above example from index 3 ( i.e start - 3 ), 2 elements ( i.e delete count - 2 and elements : 3 & 4 ) are removed and "a", "b" and "c" are added.

---

Inserting Elements into an Array

• This can be easily achieved by keeping delete count 0

Example - 7

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers.splice(3,0, "a", "b", "c");
console.log(' result - 1 ', numbers);   // [1, 2, 3, 'a', 'b', 'c', 4, 5, 6, 7, 8, 9]

I suppose this example doesn't need an explanation if you have gone through previous example.

---

Return value

• Sometimes we need to keep track of exactly which are the elements are removed.
• When we splice on an array then, it returns an array of deleted elements.
• Take a look at this example :

Example - 8

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let deletedArray = numbers.splice(3,2);
console.log( " -- deleted arr --- ", deletedArray); // [4, 5]

• Take a note of it, if no element is removed from an array then empty array is returned

Thank you for stopping by!. If you find it useful consider sharing it. You can connect with me here : Linkedin