slice and splice

Picture a notebook with notes. Sometimes you need only a few pages, and the notebook must stay whole: you make a photocopy of them. And sometimes the pages have to be torn out: the notebook gets thinner, and the torn-out sheets end up in your hands.

The same happens with an array. Often only part of it is needed: the first three results or everything except the first element. The slice method copies such a part into a new array and leaves the original as it was:

const nums = [10, 20, 30, 40, 50];

console.log(nums.slice(1, 3)); // [ 20, 30 ]
console.log(nums.slice(2)); // [ 30, 40, 50 ]
console.log(nums.length); // 5

Let's go through it line by line:

1. nums.slice(1, 3) copies the elements with the indexes 1 and 2 and prints [ 20, 30 ].
2. nums.slice(2) copies everything from the index 2 to the end.
3. nums.length is still 5: the copies did not touch the original array.

slice copies

slice(start, end) takes the elements from the index start up to the index end, not including it. That is why nums.slice(1, 3) returns two elements: the ones with the indexes 1 and 2. Without the second argument, the copy goes to the end of the array. A slice() call with no arguments copies the whole array.

A negative index counts from the end: nums.slice(-2) returns the last two elements. The same rules hold for slice on strings.

splice cuts

The similarly named splice(start, count) works differently. It cuts count elements, starting at the index start, out of the array itself, so it changes the array in place. splice returns a new array of the cut elements:

const removed = nums.splice(1, 2);
console.log(removed); // [ 20, 30 ]
console.log(nums); // [ 10, 40, 50 ]

Here splice(1, 2) tore out two elements, starting at the index 1. They came back in removed, and three elements are left in nums.

This is where the notebook analogy stops working. After sheets are torn out, the page numbers in a notebook stay the same, while the indexes of the remaining array elements shift: 40 is now at the index 1.

Values can be listed after count, and splice inserts them in place of the cut ones. When count is 0, nothing is cut, and splice only inserts:

console.log(nums.splice(1, 0, 20, 30)); // []
console.log(nums); // [ 10, 20, 30, 40, 50 ]

The call returned an empty array because there was nothing to cut. And 20 and 30 went in before the element at the index 1, so the array is back to what it was.

The second argument differs between the two methods:

• for slice it is the end index;
• for splice it is how many elements to cut.

Interviewers often ask about the difference between slice and splice. The short answer: slice copies and does not change the array, while splice cuts out of the array itself and returns what it cut.

Common mistake

Part of an array is taken with splice and arguments as for slice:

const nums = [10, 20, 30, 40, 50];
const part = nums.splice(1, 3); // ✗

There is no error, but part is [ 20, 30, 40 ], not [ 20, 30 ]: for splice, the number 3 is a count of elements. And only 10 and 50 are left in nums.

To get a part without touching the array, write nums.slice(1, 3).

Key points

• slice(start, end) copies the elements from start up to end, not including end, and does not change the array.
• splice(start, count) cuts count elements out of the array itself and returns them as a new array.
• splice(start, 0, x, y) inserts values without cutting anything.
• The second argument of slice is the end index, and of splice it is how many elements to cut.