The method on arrays returns a shallow copy of a part of an array. It takes two numbers, a , and an . Every array has a method. Here is a quick example: slice start end slice let myArray = [ '⚡️', '🔎', '🔑', '🔩' ];
let newArray = myArray.slice(2, 3);

console.log(newArray); // [ '🔑' ] There are two optional parameters for the method, , and . You can provide both, only , or neither, if you like - so all of these are valid: slice start end start 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 , the 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: 2 slice let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice(-2);  // [ '🔑', '🔩' ]
let arrayOneSliceAgain = arrayOne.slice(-1);  // [ '🔩' ] end This is the first element to from your sliced array - which is kind of confusing. You might expect to represent the last item to include - but instead it is the first item to exclude. Keep that in mind if you use ! If you omit this argument, the method will simply continue to the end of the array, as shown in this example: exclude end slice slice let arrayTwo = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayTwoSlice = myArray.slice(2);  // [ '🔑', '🔩' ] If a value greater than the array length is used, 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, will go 2 from the start, and -1 from the end of an array: slice (2, -1) let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice(2, -1);  // [ '🔑' ]
let arrayOneSliceAgain = arrayOne.slice(1, -1);  // [ '🔎', '🔑' ] Using slice to make a copy of an array Slice mutate the original array. It instead creates a new . As such, your existing array will still continue to contain the same values: does not shallow copy let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice(2, 3);  

console.log(arrayOne); // [ '⚡️', '🔎', '🔑', '🔩' ]
console.log(arrayOneSlice); // [ '🔑' ] Since makes a of an array, it is also sometimes used to duplicate and make copies of your array data. For example, an empty 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: slice shallow copy slice let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice();

arrayOneSlice[2] = '⚡️'
console.log(arrayOne); // [ '⚡️', '🔎', '🔑', '🔩' ]
console.log(arrayOneSlice); // [ '⚡️', '🔎', '⚡️', '🔩' ] This can be useful in some scenarios. However, 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: slice 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, ? We changed 's object, but its changed in both and ! Meanwhile, has only changed ! Welcome to another Javascript quirk. In the first example, using the 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 notation, Javascript interprets this as putting a new value into the place of the shallow copy itself. what arrayOneSlice items arrayOne arrayOneSlice arrayOneSlice[1] arrayOneSlice arrayOneSlice[0].items arrayOneSlice[1] [1] That means that although it may like you are making a copy with when working with simple arrays, this does 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. seem slice not 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.

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Java

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Tip Your Hat Tutorials Best Tutorials

Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

Let Your Engineers & PMs focus on Product. Apply for $50K Credits!

Understanding Javascript's Array Slice Method

Understanding Javascript's Array Slice Method

Too Long; Didn't Read

@smpnjn

RELATED STORIES