Array.splice and Array.slice in JavaScript

What's the difference?

An article from https://www.knowledgescoops.com

Photo by Artem Sapegin on Unsplash

You must have used the above functions available in 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 one 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 so 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 array
arr // [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 that, 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 the splice function but if we only want a portion of an array, we use slice.

Articles you might love …

The power of window.console in JavaScript

Some simple and amazing JavaScript tricks

The String Data Type and String Class in JavaScript

For more such articles, visit www.knowledgescoops.com
Want to read more articles like this?
Follow me on medium @kunaltandon.kt
Connect with me on LinkedIn:
https://www.linkedin.com/in/kunal-tandon/