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

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.