Understanding Javascript's Array Slice Method

The slice method on arrays returns a shallow copy of a part of an array. It takes two numbers, a start, and an end. Every array has a slice method. Here is a quick example:

let myArray = [ '⚡️', '🔎', '🔑', '🔩' ];
let newArray = myArray.slice(2, 3);

console.log(newArray); // [ '🔑' ]

There are two optional parameters for the slice method, start, and end. You can provide both, only start, or neither, if you like - so all of these are valid:

let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice(2, 3);  // [ '🔑' ]

let arrayTwo = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayTwoSlice = arrayTwo.slice(2);  // [ '🔑', '🔩' ]

let arrayThree = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayThreeSlice = arrayThree.slice();  // [ '⚡️', '🔎', '🔑', '🔩' ]

start

This is the index of the first item to include in your new array. For example, if set to 2, the slice will start your new array copy at index 2. If a negative is used, it indicates offset from the end of a sequence. For example:

let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice(-2);  // [ '🔑', '🔩' ]
let arrayOneSliceAgain = arrayOne.slice(-1);  // [ '🔩' ]

end

This is the first element to exclude from your sliced array - which is kind of confusing. You might expect end to represent the last item to include - but instead it is the first item to exclude. Keep that in mind if you use slice! If you omit this argument, the slice method will simply continue to the end of the array, as shown in this example:

let arrayTwo = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayTwoSlice = myArray.slice(2);  // [ '🔑', '🔩' ]

If a value greater than the array length is used, slice only continues to the end of the array. If a negative value is used, it indicates an offset from the end of an array. For example, (2, -1) will go 2 from the start, and -1 from the end of an array:

let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice(2, -1);  // [ '🔑' ]
let arrayOneSliceAgain = arrayOne.slice(1, -1);  // [ '🔎', '🔑' ]

Using slice to make a copy of an array

Slice does not mutate the original array. It instead creates a new shallow copy. As such, your existing array will still continue to contain the same values:

let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice(2, 3);  

console.log(arrayOne); // [ '⚡️', '🔎', '🔑', '🔩' ]
console.log(arrayOneSlice); // [ '🔑' ]

Since slice makes a shallow copy of an array, it is also sometimes used to duplicate and make copies of your array data. For example, an empty slice function will also create a new array in memory - allowing you to have two copies of the same array with the same reference in memory:

let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice();

arrayOneSlice[2] = '⚡️'
console.log(arrayOne); // [ '⚡️', '🔎', '🔑', '🔩' ]
console.log(arrayOneSlice); // [ '⚡️', '🔎', '⚡️', '🔩' ]

This can be useful in some scenarios. However, slice only makes a shallow copy of an array. That means things get a little confusing when you have objects in your array. Consider the following array:

let arrayOne = [ { items: [ '⚡️', '🔎', '🔑', '🔩' ]}, '👨‍💻', '😄', '🐔' ]

This array contains an object within it. Let's try making a sliced copy of this array, and then update items:

let arrayOne = [ { items: [ '⚡️', '🔎', '🔑', '🔩' ]}, '👨‍💻', '😄', '🐔' ]
let arrayOneSlice = arrayOne.slice(0, 2);

arrayOneSlice[0].items = [ '🔎' ];
arrayOneSlice[1] = '🔎';

console.log(arrayOne); // [ { items: [ '🔎' ]}, '👨‍💻', '😄', '🐔' ]
console.log(arrayOneSlice); // [ { items: [ '🔎' ]}, '🔎' ]

Wait, what? We changed arrayOneSlice's items object, but its changed in both arrayOne and arrayOneSlice! Meanwhile, arrayOneSlice[1] has only changed arrayOneSlice! Welcome to another Javascript quirk. In the first example, using the arrayOneSlice[0].items notation, Javascript interprets this as updating an existing element within the shallow copy and thus it affects the original. However, somewhat confusingly, by using the arrayOneSlice[1] notation, Javascript interprets this as putting a new value into the [1] place of the shallow copy itself.

That means that although it may seem like you are making a copy with slice when working with simple arrays, this does not hold up when using it on more complex objects. Knowing this little piece of trivia is going to save you a lot of time someday.

Conclusion

The Javascript slice method is useful for creating new shallow copies of arrays with a subset of the original array’s data. It can also be used in a limited way to make duplicates that can be independently updated. Javascript slice copies still have the same reference as the original in memory, which is useful to know when manipulating them.

I hope you've enjoyed this guide. For more Javascript, check out my other articles here.

Also published here.