Understanding JavaScript Array methods (2): slice


An idiomatic way to create shallow copies of arrays uses slice.

const originalArr = [1,2,3];
const copy = originalArr.slice();

This post dives into the slice method and describes a few more tips and tricks. At the end of this post you should know the output of [1,2,3].slice(-3,-1).

Slice

The full method signature is arr.slice(start, end). Start and end are optional parameters defaulting to 0 and arr.length respectively.

start: The zero-based index to start the copy from; defaults to 0 if not specified.

end: The index to copy up to, the last copied element will be the element located at end – 1.  Defaults to arr.length if not specified.

Return
Slice will return a new array with the copied elements.

Usage

1. Cloning arrays

const originalArr = [1,2,3];
const copy = originalArr.slice();

// [1,2,3]

The code above is similar to the one below (with defaults set)

const copy = originalArr.slice(0, 3);

// [1,2,3]

2. Copy all values starting from some index

const originalArr = [1,2,3,4,5,6];
const copy = originalArr.slice(3);

// [4, 5, 6]

3. Copy a subsection of an array

const originalArr = [1,2,3,4,5,6];
const copy = originalArr.slice(3,5);

// [4, 5]

Test your knowledge

What will be the output of the code below?

Hint: The element at the end index is not included in the copy operation.

const originalArr = [1,2,3,4,5,6];
const copy = originalArr.slice(3,4);
Slicing beyond Limits
Let’s take this a notch higher; what happens if start and end are negative? Or when end is an astronomically large number?
1. End > Array length
const originalArr = [1,2,3];
const copy = originalArr.slice(0, 200);
The result is same as slicing up to the last element in the array. Note there are no values in the original array after index 4.
2. Start > Array length
The result is an empty array. This means starting to slice after the array. You would be right to argue that this should throw an error since the index is invalid. However, this is quirky, quirky JavaScript.
const originalArr = [1,2,3];
const copy = originalArr.slice(5, 200);
3. Negative values
This might not be applicable in real life but it is a good thing to know.
Mastery requires familiarity with both the mundane and esoteric.
Negative values translate into counting from the right end of the array. A start value of -1 corresponds to the last array element while -2 corresponds to the penultimate element.
Another trick is to find the element at index array.length + (negative index). For example, in a 3-element array; a start value of -1 identifies the element at index 3 + (-1): which is the element at index 2. The same principles apply to negative end values.
let originalArr = [1,2,3];
let copy = originalArr.slice(-1);
// [2]
// start is -1; this is equivalent to a start value of 2
// equivalent code: originalArr.slice(2);

// Negative start and end
originalArr = [1,2,3];
copy = originalArr.slice(-2,-1);
// [2]

// start is -1; this is equivalent to a start value of 2
// end is -2; this is equivalent to a start value of 3
// equivalent code: originalArr.slice(2,3);

That’s about it! Now go pull slice tricks on your friends and show off your JavaScript slicing superpowers.

Leave a Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.