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.
Table of Contents
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.