Say you've got a list of ten items and you only want a few of them. You don't want to delete anything or mess up the original list, you just want a piece of it. That's exactly what slice() does. You tell it where to start and where to stop, and it hands you a fresh array with just those items. The original stays exactly as it was. Let's go through how it works, with examples you can try yourself.
 

Table of Contents

---

 

What slice() Does

Takes a piece of an array: you pick the start and the end, and it copies what's in between.

Gives you a brand-new array: the result is separate from the original, so you can do whatever you like with it.

Never touches the original: nothing gets removed, added or changed.

Stops just before the end index: the item at the end position is not included. This one catches a lot of people out.

let fruits = ["apple", "banana", "mango", "orange", "grape"];
let part = fruits.slice(1, 3);
console.log(part);   // ["banana", "mango"]
console.log(fruits); // still has all five

Here we asked for index 1 up to index 3, so we got banana and mango. Orange at index 3 is left out.

Syntax and Parameters

array.slice(start, end);

start: where to begin. This item is included.

end: where to stop. This item is not included, and you can leave it out.

Leave out both: you get a full copy of the array.

let nums = [10, 20, 30, 40, 50];
console.log(nums.slice(2));    // [30, 40, 50]
console.log(nums.slice(1, 4)); // [20, 30, 40]
console.log(nums.slice());     // [10, 20, 30, 40, 50]

Counting From the End

Negative numbers work backwards: -1 means the last item, -2 the one before it, and so on.

Great for the last few items: you don't need to work out the length yourself.

let nums = [10, 20, 30, 40, 50];
console.log(nums.slice(-2));     // [40, 50], the last two
console.log(nums.slice(0, -1));  // [10, 20, 30, 40], everything but the last
console.log(nums.slice(-3, -1)); // [30, 40]

Where You'll Actually Use It

Grabbing the first few items: like showing the top three results.

let results = ["a", "b", "c", "d", "e"];
console.log(results.slice(0, 3)); // ["a", "b", "c"]

Pagination: showing one page of a long list at a time.

let items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let pageSize = 3;
let page = 2;
let start = (page - 1) * pageSize;
console.log(items.slice(start, start + pageSize)); // [4, 5, 6]

Making a copy: so you can change the copy without affecting the original.

let original = [1, 2, 3];
let copy = original.slice();
copy.push(4);
console.log(original); // [1, 2, 3]
console.log(copy);     // [1, 2, 3, 4]

Leaving one item out without changing the list:

let list = ["a", "b", "c", "d"];
let withoutSecond = [...list.slice(0, 1), ...list.slice(2)];
console.log(withoutSecond); // ["a", "c", "d"]

It Works on Strings Too

Same idea, different type: strings have their own slice() for pulling out part of the text.

let word = "JavaScript";
console.log(word.slice(0, 4)); // "Java"
console.log(word.slice(4));    // "Script"
console.log(word.slice(-6));   // "Script"

A Few Things Worth Knowing

It's a shallow copy: if your array holds objects, the copy points to the same objects, so changing one shows up in both.

let users = [{ name: "Vi" }, { name: "Sam" }];
let copy = users.slice();
copy[0].name = "Changed";
console.log(users[0].name); // "Changed"

It won't crash if you go out of range: you just get a shorter or empty array.

console.log([1, 2, 3].slice(5)); // []

Start after end gives you nothing: slice(3, 1) returns an empty array.

Common Mistakes

1. Mixing it up with splice(): one is safe, the other changes your array.
2. Expecting the end to be included: slice(1, 3) gives you indexes 1 and 2 only.
3. Thinking it's a full deep copy: nested objects are still shared.
    

Conclusion

Frequently Asked Questions (FAQs)

No. It always gives you a new one and leaves the original alone.

2.What's the difference between slice() and splice()?

slice() copies part of an array without changing it. splice() removes or adds items and changes the array itself.

3.Is slice() a deep copy?

No. Objects inside the array are still shared between the original and the copy.