Array.splice and Array.slice in JavaScript

Hello, Habr! I present to you the translation of the article “Array.splice and Array.slice in JavaScript” by Kunal Tandon.

You simply must use the above functions available in the JavaScript Array prototype. But they look so similar that sometimes you can get confused between them.

Key differences

Array.splice modifies the original array and returns an array containing the deleted elements.

Array.slice does not modify the original array. It simply returns a new array of elements, which is a subset of the original array.

Array.splice

Splice is used to modify the contents of an array, which includes deleting elements, replacing existing elements, or even adding new elements to this array.

When using the splice function, the original array is updated.

Consider the following array:

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; 

Array.splice with syntax

arr.splice (fromIndex, itemsToDelete, item1ToAdd, item2ToAdd, ...);

Delete items

To remove elements from an array, we write:

 var deleItems = arr.splice (3, 2); 

This will remove the two elements starting at index 3 and return the remote array. As a result, we get:

 deleItems // [3, 4] arr // [0, 1, 2, 5, 6, 7, 8] 

Adding New Items

To add new elements to the array, we write:

 const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; var arr2 = arr.splice (2, 0, 100, 101); 

Starting from the second element of the array, the numbers 100 and 101 will be added. The final values ​​will be as follows:

 arr2 // [],         arr // [0, 1, 100, 101, 2, 3, 4, 5, 6, 7, 8] 

Modify an existing item

We can tricky modify an existing element in the array using splice to remove the element by its index number 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); //   -   3  1    100 

We get the following values ​​for arr and arr2 after executing the above code snippet:

 arr2 // [3]      3   arr arr // [0, 1, 2, 100, 4, 5, 6, 7, 8] // 3   100   arr 

Array.slice

While splice can also insert and update array elements, the slice function is only used to remove elements from the array.
We can only remove elements from the array using the slice function

Array.slice syntax

arr.slice (startIndex, endIndex);

startIndex - the starting index of the element for the new array, which we should get in the new array
startIndex.endIndex (optional) is the final index to which slicing should be performed, not including this element.

Consider the following array:

 const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; 

To get a part of the array from the values ​​[2, 3, 4, 5], we write:

 var slicedArr = arr.slice (2, 6); 

Please note that here we specified the second argument 6, not 5. After executing the above code, we get the following array:

 arr // [0, 1, 2, 3, 4, 5, 6, 7, 8] slicedArr // [2, 3, 4, 5] 

The arr variable remains unchanged after the slice statement was executed, while the splice statement updated the original array.

So, if we want to update the original array, we use the splice function, but if we need only part of the array, we use slice.