How to Insert an item into an array at a specific index in JavaScript – Detailed Guide

There are a couple of ways to insert an item into an array at a specific index in JavaScript.

You can insert an item into an array at a specific index in JavaScript using the array.splice(desiredIndex, 0, "item") method.

Basic Example

    const birds = ["dove", "parrot", "peacock", "finch", "cuckoos"];

    birds.splice(1,0,"owl");

    console.log(birds);

Output

    ["dove", "owl", "parrot", "peacock", "finch", "cuckoos"]

This tutorial teaches you how to insert an item into an array at a specific index using different methods and when it is appropriate to use each method.

insert an item into an array at a specific index Using Array.Splice()

You can use Array.splice() method to add / remove/replace elements in a specific place of an array.

The original array will be modified while using array.splice().

Use this method when you want to insert an item at a specific position of the array after removing the item from that position. Also, you can use it to add an item without replacing the existing item.

Code

    const birds = ["dove", "parrot", "peacock", "finch", "cuckoos"];

    birds.splice(1,0,"owl");

    console.log(birds);

Output

In the above example, the start index is set to 1, so elements will be added in that index position 1. Next, the deletecount is set to 0, stating no elements to be deleted. Last, the elements parameter contains the value “owl”.
You can see the insert value(“owl”) is added in the index position “1”, and no elements are deleted in the array because of deletecount 0.

    ["dove", "owl", "parrot", "peacock", "finch", "cuckoos"]

Inserting Multiple Values At a Specific Position Of An Array

You may need to insert multiple values at a specific position of an array. You can use the splice() method to insert multiple elements starting at a specific position.

Code

The following code demonstrates how to insert multiple items at a specific position of an array.

The multiple items are passed as the parameters of the splice() method.

    var birds = ["dove", "parrot", "peacock", "finch", "cuckoos"];

    birds.splice(2,0,"owl", "eagle", "pigeon");

    console.log(birds);

Output

You can see, 3 values(“owl”, “eagle”, “pigeon”) are added starting at the index position “2”.

    ["dove", "parrot", "owl", "eagle", "pigeon", "peacock", "finch", "cuckoos"]

insert an item into an array at a specific index Using For Loop

For loop is used to iterate through an existing array and insert an item into the array at a specific index.
All the elements whose index position is greater than the insert index are shifted one position to the right, and the new element is inserted in the insert index position.

Use this method when you want to check if the item passes any conditions and insert it only if the condition is passed.

Code

    const birds = ["dove", "parrot", "peacock", "finch", "cuckoos"];

    // index position to add an item
    let insertIndex = 3;

    // item(value) to be added in the array
    let insertItem = "owl";

    for (let i = birds.length; i > insertIndex; i--) {

        //shift the elements that are greater than insert index
        birds[i] = birds[i-1];

    }

    // insert element at insert index position
    birds[insertIndex] = insertItem;

    console.log(birds);

Output

In the above example, For loop is iterated, and items are shifted one step to the right from the last index of an array to the insert Index position. Once the loop reaches the insert Index position loop breaks, and the new item is inserted in the specific insert Index position.

    ["dove", "parrot", "peacock", "owl", "finch", "cuckoos"]

JSfiddle

This tutorial is available in this JSFiddle.

Additional Resources

Leave a Comment