Both splice() and slice() sound identical to new developers but have a big difference. With the array slice() method, you can get a portion of an array without actually modifying the original array. Meanwhile, the splice() method modifies the contents of the original array and returns the new array containing the deleted items.
The splice() method modifies the original array by altering its items. Adding or removing items from an array may change its length as well.
array.splice(start, deleteCount, element1, element2, …, elementN)
The splice() method accepts three parameters
- start (required). This is a required parameter and has an integer value. This parameter provides the index/location of an item in an array from where modification would take place. Its value can be either 0, a negative integer, or a positive integer.
- A zero value indicates the starting of an array index, whereas the negative index value would indicate counting starts from the end of the array starting with -1.
- deleteCount (optional). This is an optional parameter, and also holds an integer value. It specifies the number of items to be removed from an array, beginning from the index specified in the start parameter. If you don’t want to remove items, deleteCount parameter should be zero. If not specified, all the elements starting from the start will be removed. On the other hand, if its value is greater than or equal to the length of the array, all the items from the array will be removed from the starting index.
- element1, element2,…, elementN (optional). This is also an optional parameter, and it specifies the items to be added to the array beginning from the index specified in the start parameter. If no elements are specified in this parameter, splice() will only remove items from the array.
- return value. This method returns an array containing all the items that were removed from the original array. If none of the elements are removed, an empty array will be returned.
Let’s dive further to see how the splice method produces different results on an array of strings.
The above code, after applying the splice method, removes 1 item at index 2 and inserts 3 items specified in the third parameter, with a position starting at index 2.
In this example, the index value is a negative integer, and we are not specifying a second parameter. So the output of the splice method will remove all items starting from index -3.
In this case, we used the negative index. As a result, array item ‘four’ is removed starting from the end of the list. ‘Seven’, ‘eight’, ‘nine’ are added starting from position -3.
How to remove an element from an array
Deleting an element from an array seems simple. However, this could result in an empty index containing an undefined value.
Another option is to use array.shift() or array.pop() method and remove only one element at a time. These methods also remove items either from the beginning of an array or from the end of an array.
However, if you need to remove multiple items from the middle of the array, then you should use splice().
In this example, the array contains four types of fruit. We use the splice method to remove two items starting at index 1. As a result, it removed pineapple and mango from the fruit array which was otherwise not possible with shift and pop methods.