Array.splice and Array.slice in JavaScript
August 09, 2019
You must have used the above functions available in the JavaScript Array’s prototype. They look so similar, at times even I get confused between the two.
Key Difference
Array.splice modifies the original array and returns the array containing the elements deleted.
Array.slice does not modify the original array. It just returns a new array of elements which is a subset of the original array.
Array.splice
splice is used to modify the content of an array which includes removing elements, replacing existing elements or even adding new elements to an array.
Using the splice function updates the original array.
Consider the following array:
const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8];
Array.splice signature
arr.splice(fromIndex, itemsToDelete, item1ToAdd, item2ToAdd, ...);
Removing the elements
To remove elements from an array, we write
var deletedItems = arr.splice(3, 2);
This will delete 1 element starting from index 3 and returns the deleted array. As a result, we get
deletedItems // [3, 4]
arr // [0, 1, 2, 5, 6, 7, 8]
Adding new elements
To add new items to an array, we write
const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8];
var arr2 = arr.splice(2, 0, 100, 101);
At 2, this will add the numbers 100 and 101. The final values will be
arr2 // [] , since we didn't deleted an element from an array
arr // [0, 1, 100, 101, 2, 3, 4, 5, 6, 7, 8]
Modifying an existing element
We can cleverly modify an existing element in an array using splice such that we delete the item at an index and insert a new element in its place.
const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8];
To replace 3 with 100, we write
var arr2 = arr.splice(3, 1, 100);
// which means - at index 3, delete 1 element and insert 100
We get the following values for arr and arr2 after executing the above code snippet.
arr2 // [3] as we deleted the element 3 from the arrayarr // [0, 1, 2, 100, 4, 5, 6, 7, 8] // 3 gets replaced with 100 in array arr
Array.slice
While splice can also insert and update elements of an array, the slice function is used only to remove elements from an array.
We can only delete elements from an array using the slice function
Array.slice signature
arr.slice(startIndex, endIndex);
startIndex — The starting index for the sliced array we need to get with startIndex included
endIndex (optional) — The ending index up to which the slicing is to be done, with endIndex excluded
endIndex (optional) — The ending index up to which the slicing is to be done, with endIndex excluded
Consider the following array
const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8];
To get a slice of an array from values [2, 3, 4, 5] we write
var slicedArr = arr.slice(2, 6);
Notice here we gave the second argument as 6 and not 5.
After executing the above code, we get the values as
arr // [0, 1, 2, 3, 4, 5, 6, 7, 8]
slicedArr // [2, 3, 4, 5]
The variable arr remains the same after the execution of the slice statement whereas the splice statement was updating the actual array.
So, if we want to update the original array, we use splice function but if we only want a portion of an array, we use slice.
0 comments