The JavaScript Slice Cheat Sheet

The ability to extract subarrays is key to array manipulation. JavaScript’s slice() method was one of the first built-in methods I memorized after maybe length(). Most (all?) high-level programming languages have a similar method called by a similar name. It’s an operation so common that many languages, like Python, use bracket notation to make slicing almost as easy as retrieving an element (i.e., arr[3] to retrieve element at index 3, arr[:3] to retrieve elements from index 0 to index 3). Below, you'll find a few tips I wish I had known when I started slicing, splicing, and dicing* arrays in JavaScript.

*JK, there’s no built-in dice() method.

Inclusive vs. Exclusive

According to the MDN docs:

“The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array…"

Notice first that the start and end (our two arguments) represent the index of an item. This will be an important distinction in the following section. Then, note that the end is not included. It can be hard to remember at first which indices are required for the range we need. The first argument (the start of the subarray) is inclusive, while the second argument is exclusive.

When I was learning, I found it helpful to think about slicing as a physical activity where the cut is always made to the left of the specified index as shown below:

let arr= [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]`
arr.slice(1, 6) //=>
//    |< left of 1    |< left of 6
//[0, | 1, 2, 3, 4, 5 |, 6, 7, 8, 9]
//    | 1, 2, 3, 4, 5 |
 //=>  [1, 2, 3, 4, 5]

slice() vs. splice()

Another likely source of confusion for a coding novice is the existence of slice()’s cousin, splice(). I still check Google half the time. They are both built-in array methods, both return a subarray from a specified range, and their names are awfully similar. However, there are some key distinctions in their behavior:

1. splice() is destructive. This means it alters the original array, in this case by removing the elements in the specified range.

Warning: My mnemonics, like many folks’, are idiosyncratic, so the following may be completely unhelpful to you. But here: the ‘p’ in splice reminds me of the pop() method, another method beginners are likely to have encountered. The pop() method is also destructive. It removes the last element from an array (i.e., the element pops off). So splicing is like slicing and then popping the slice… Confusing? You were warned.

2. splice()’s second argument is not an index, but a number of elements to be removed. This means while the above example (slice(1, 6)) would return [1, 2, 3, 4, 5] , splice(1, 6) will return [ 1, 2, 3, 4, 5, 6].

3. splice() can also take a third argument that tells the method to insert a given element after the index specified in the first argument.

The Cheat Sheet: English to JavaScript

Now, hopefully, you have a slightly better grasp on slice(). However, when I was learning, it would still take a few precious seconds for me to reason through the arguments and methods I needed. So, I wanted to include a sort of cheat sheet that translates the desired outcome from English to JavaScript.

For any array, where i and/or j is an index, and n is a number of elements, you can remember a few common operations as follows:

1. From i to the end — elements in a range starting with the ith element, ending with the last element in the array: arr.slice(i)

This is as basic as slice() gets. It only takes one argument—the starting index—and includes everything after.

2. From the beginning to i — elements in range starting with the beginning of the array and ending with the ith element: arr.slice(0, i + 1)

Remember the “cut to the left” exclusion rule means that to get the ith element, we need to add one (1) to our second argument.

3. From i to j — elements in a range starting with the ith element and ending with the jth element:arr.slice(i, j + 1)

This is just the logical extension of our first two examples.

4. The first n items of the array:arr.slice(0, n)

This is of course the same case as #2, phrased differently. If we are concerned with the number of elements rather than the index, our inputs are more intuitive.

5. The last n items of the array:arr.slice(-n)

Because negative indexes “wrap around” in JavaScript, we can quickly determine the last n elements; arr.slice(-5) therefore starts 5 from the end, and since our first argument is inclusive, we will get all five elements.

6. These n elements starting with the ith element:arr.slice(i, i + n)

This logic follows from #4. After all, if i = 0, our second argument will be 0 + n, a.k.a. n. Because of zero indexing, if we consider the number of elements rather than the index, our "cut to the left" exclusion rule works in our favor, allowing us to simplify to n elements.

Below I’m including a gist file that has custom functions I built to illustrate the above. Feel free to plug it into Node.js or the browser’s developer tools and play around until it makes sense.

I hope this helps in some small way. Feel free to leave a comment if you can think of another common case worth including, or to share your own mnemonics!

Resources:

• MDN Docs: Array.prototype.slice()
• MDN Docs: Array.prototype.splice()