Start learning free

LESSON 113 OF 671 · ARRAYS I

Slicing an Array in JavaScript

Lesson Read the full explanation

TL ; DR:

arr.slice(i, j) returns a new array with the items from index i up to, not including, j. The original array doesn't change.


let letters = ["a", "b", "c", "d", "e"];

let middle = letters.slice(1, 4);
// middle is ["b", "c", "d"]

// letters is still ["a", "b", "c", "d", "e"]

Full lesson:

Sometimes you need only part of an array, like the first few items. The slice method copies that part into a new array.

Give it the start index and the end index. The item at the end index is not included. So letters.slice(1, 4) has the items at 1, 2 and 3.

That makes the length easy to see: 4 - 1 = 3 items.

To go to the very end, use the length as the end index:

let tail = letters.slice(3, letters.length);
// tail is ["d", "e"]

You may also leave the end out. So letters.slice(3) gives the same ["d", "e"].

The original array stays as it was.

Don't mix up slice and splice. The slice method copies a part and leaves the array alone. But splice changes the array itself.

Your task

runners holds a race's runners, in the order they finished.

Put the first three in a new array named podium. Put everyone else, from index 3 to the end, in one named rest.

The code below prints both, then the length of runners.

Expected output:

Ana Ben Cleo
Dan Eve
5
STEP 1 OF 2
    Ctrl + Enter to check

    JAVASCRIPT · ARRAYS I

    Array Slicing in JavaScript, explained

    What slice does

    When you need only part of an array, such as the first few items, slice copies that part into a new array. You give it a start index and an end index. The item at the end index is not included.

    let letters = ["a", "b", "c", "d", "e"];

let middle = letters.slice(1, 4);
console.log(middle);
console.log(letters);

    [ 'b', 'c', 'd' ]
[ 'a', 'b', 'c', 'd', 'e' ]

    letters.slice(1, 4) has the items at indexes 1, 2 and 3. The length of the result is easy to see: 4 - 1 = 3. The original array is untouched.

    Slicing to the end

    To go to the very end, use the length as the end index, or leave the end out:

    console.log(letters.slice(3, letters.length));
console.log(letters.slice(3));

    [ 'd', 'e' ]
[ 'd', 'e' ]

    Why the end is left out

    The end index feels odd at first, but it makes the arithmetic simple. The number of items you get is the end minus the start, so slice(0, 3) always gives three items. Two slices also fit together without overlap or a gap: slice(0, 3) and slice(3) together hold every item exactly once. That is the idea behind splitting an array into a front part and a back part at one index.

    Edge cases

    • An empty range gives an empty array: letters.slice(2, 2) is [], and so is letters.slice(4, 1).
    • An end past the length is fine: letters.slice(3, 10) is ["d", "e"]. It never throws an error.
    • A negative index counts from the end: letters.slice(-2) is ["d", "e"].

    slice and splice are different

    The names are close, the behaviour is not. slice copies a part and leaves the array alone. splice changes the array itself.

    let sp = ["a", "b", "c", "d", "e"];

console.log(sp.splice(1, 3));
console.log(sp);

    [ 'b', 'c', 'd' ]
[ 'a', 'e' ]

    Both calls return ["b", "c", "d"] here, but only splice removes them from the original.

    The lesson's task

    runners holds five runners in finishing order. The first three go in a new array named podium, and everyone from index 3 to the end goes in rest.

    1. runners.slice(0, 3) stops before index 3, so it copies the items at 0, 1 and 2.
    2. runners.slice(3, runners.length) starts at index 3. The length is one past the last index, so the copy runs to the end.
    let runners = ["Ana", "Ben", "Cleo", "Dan", "Eve"];
let podium = runners.slice(0, 3);
let rest = runners.slice(3, runners.length);
console.log(podium[0], podium[1], podium[2]);
console.log(rest[0], rest[1]);
console.log(runners.length);

    Ana Ben Cleo
Dan Eve
5

    The last line shows that runners still has 5 items.

    Common mistakes

    • Counting the end as included. To get the first three items, the end is 3, not 2. Writing slice(0, 2) gives only two.
    • Expecting the array to shrink. After a slice, the original still has every item. If a task needs the original changed, slice alone will not do it.
    • Throwing the result away. A bare runners.slice(0, 3) on its own line computes the copy and then forgets it. Store the result in a variable such as podium to keep it.
    • Using splice by habit. It returns the same part but removes it from the array, which in this task would leave runners with only two items.

    Key takeaways

    • arr.slice(i, j) copies the items from index i up to, not including, j.
    • The end is optional: arr.slice(i) runs to the end.
    • The original array does not change.
    Keep going with JavaScript500+ step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free