Start learning free

LESSON 111 OF 671 · ARRAYS I

Insert and Remove at a Position in JavaScript

Lesson Read the full explanation

TL ; DR:

splice(i, 0, x) puts x at index i. Use splice(i, 1) to take out the item at index i. The other items move to make room or to close the gap.


let colors = ["red", "green", "blue"];

colors.splice(1, 0, "pink");
// colors is now ["red", "pink", "green", "blue"]

colors.splice(0, 1);
// colors is now ["pink", "green", "blue"]

Full lesson:

push adds an item at the end, and pop takes the last one away. To work anywhere else in an array, use splice.

splice(start, count, item) goes to index start. It takes out count items there. Then it puts in the items you list after count.

With a count of 0, it only inserts. The items from start on move one place to the right:

let pets = ["Rex", "Milo"];

pets.splice(0, 0, "Luna");
// pets is now ["Luna", "Rex", "Milo"]

With a count of 1 and no items, it only removes. The items after it move one place to the left:

pets.splice(0, 1);
// pets is now ["Rex", "Milo"]

Watch the indexes. After an insert or a removal, the items behind that spot have new indexes.

splice changes the array itself. It returns an array of the removed items, like ["Luna"].

Your task

pets holds the pets waiting at the vet, in order.

Bella has an appointment, so she goes second, at index 1. Then Milo goes home. Take him out of the line.

The code below prints how many pets wait once Bella is in. At the end, it prints the pets left.

Expected output:

4
Rex Bella Luna
STEP 1 OF 2
    Ctrl + Enter to check

    JAVASCRIPT · ARRAYS I

    Array Insert Remove in JavaScript, explained

    Why splice

    push adds an item at the end and pop takes the last one away. To insert or remove anywhere else, JavaScript has splice. It changes the array itself, so there is no new array to store.

    How splice(start, count, item) works

    The call goes to index start, takes out count items there, then puts in whatever items you list after count.

    Insert: a count of 0

    With a count of 0 nothing is taken out, so the call only inserts. The items from start on move one place to the right.

    let pets = ["Rex", "Milo"];

pets.splice(0, 0, "Luna");
console.log(pets);

    [ 'Luna', 'Rex', 'Milo' ]

    Remove: a count of 1 and no items

    With a count of 1 and nothing after it, the call only removes. The items after the gap move one place to the left.

    let pets = ["Luna", "Rex", "Milo"];

let removed = pets.splice(0, 1);
console.log(pets);
console.log(removed);

    [ 'Rex', 'Milo' ]
[ 'Luna' ]

    splice returns an array of the items it removed. Here that is ["Luna"]. When you only want the effect on the array, ignore the return value.

    Remove and insert in one call

    The count and the new items work together, so one call can replace items. Starting from ["a", "b"], splice(1, 1, "x", "y") takes out "b" and puts in "x" and "y", which gives ["a", "x", "y"].

    Thinking in positions

    Picture the array as a row of numbered seats. An insert opens a new seat at the position you name and every person behind it slides back one seat. A removal empties a seat and everyone behind it steps forward. The array has no gaps, so the indexes always run from 0 up to the length minus one.

    This is why the order of your calls matters. Two splice calls on the same array give different results if you swap them, because the second call sees the array the first one left behind. When a task has two changes in a row, redo the picture after each one and read the index off the new picture.

    The lesson's task

    The array pets holds ["Rex", "Milo", "Luna"]. Bella has an appointment and goes second, at index 1. Then Milo goes home. The code prints how many pets wait once Bella is in, and at the end the pets left.

    1. Insert Bella: index 1, count 0, the item "Bella". Milo and Luna each move one place to the right, so the array is ["Rex", "Bella", "Milo", "Luna"].
    2. Remove Milo. He was at index 1, but Bella's insert pushed him to index 2. So the call is splice(2, 1).
    let pets = ["Rex", "Milo", "Luna"];
pets.splice(1, 0, "Bella");
console.log(pets.length);
pets.splice(2, 1);
console.log(pets[0], pets[1], pets[2]);

    It prints:

    4
Rex Bella Luna

    Common mistakes

    • Using an old index. After an insert or a removal, the items behind that spot have new indexes. Milo started at index 1, but after Bella went in, splice(1, 1) would take Bella out and leave Milo in line. Count again after every change.
    • Forgetting the count. splice(1) with no count removes everything from index 1 to the end. On ["a", "b", "c"] it leaves ["a"].
    • Counting from the wrong side. The index is where the change starts, and the count says how far it reaches. Mixing up the two arguments, as in splice(1, 0) when you meant to insert, changes nothing at all.
    • Expecting the array back. The return value is the removed items, not the changed array. Keep using the original variable.

    Key takeaways

    • splice(i, 0, x) inserts x at index i.
    • splice(i, 1) removes the item at index i.
    • The array changes in place, and the items behind the spot shift by one.
    Keep going with JavaScript500+ step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free