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 arrays 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.
Top comments (0)