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 array.splice(desiredIndex, 0, "item") method.

Arrays store multiple values in a single variable, so when working with arrays, you will encounter scenarios where to insert an item into an array at a specific index.

In this tutorial, you’ll learn about the different methods to remove an item from an array in JavaScript.

If You’re in Hurry…

You can use the code snippet to insert an item into an array at a specific index in javascript.

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

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

    console.log(birds);

Output

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

If You Want to Understand Details, Read on…

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 using array.splice().

Syntax

array.splice(start, deletecount, element1, ....., elementN)

Parameters

start

  • index position at which array changes to happen.
  • if the value specified is greater than the length of the array, then the start value will be set to the array’s length and will act as an addition function, and no deletion will happen.
  • if the value specified is negative, start will be set to 0.

deletecount

  • value indicates the number of elements from the array to be removed
  • if deletecount is not specified or the value is greater than the length of the array values, then all the elements from start to length of array will be deleted.
  • if deletecount has to be greater than zero value to delete any item from the array

elements(s) (optional)

  • one or more elements to be added to array Return value
  • updated array will be returned Code
    const birds = ["dove", "parrot", "peacock", "finch", "cuckoos"];

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

    console.log(birds);

Output

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

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 value “owl”.
In the Output, you can see the insert value(“owl”) is added in the index position “1” and no elements are deleted in the array.

Let’s see another example of inserting multiple values at a specific position in an array.
Code

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

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

    console.log(birds);

Output

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

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

Using For Loop

For loop is used to iterate through the array and insert an item into an 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.
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

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

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 insertIndex position. Once the loop reaches the insertIndex position loop breaks, and the new item is inserted in the specific insertIndex position.

JSfiddle

This tutorial is available in this JSFiddle.

Conclusion

In this tutorial, you’ve learned how to insert an item into an array at a specific index in Javascript. You’ve also known different ways to insert an item into an array at a specific index.

If you’ve any questions, please comment below.

You May Also Like

Leave a Comment