DEV Community

Cover image for The Most Powerful Array Method : Splice
Swastik Upadhye
Swastik Upadhye

Posted on • Updated on

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 )
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode
  • 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);   // []
Enter fullscreen mode Exit fullscreen mode
  • 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]
Enter fullscreen mode Exit fullscreen mode
  • 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];
Enter fullscreen mode Exit fullscreen mode
  • 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)
Enter fullscreen mode Exit fullscreen mode
  • 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]
Enter fullscreen mode Exit fullscreen mode
  • 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)
Enter fullscreen mode Exit fullscreen mode
  • 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]
Enter fullscreen mode Exit fullscreen mode
  • 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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode
  • 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

Top comments (0)