How to Insert an Element into an Array at a Specific Index in JavaScript

by

Arrays are essential data types in almost all programming languages. They are used to store a series of values representing the same type of values. For example, the salary of all the employees in a company can be conveniently stored in the form of arrays. This article will teach us how to insert an item into an array at a specific index in JavaScript.

Insert an Element into an Array at a Specific Index in JavaScript

To insert an element into an array to a particular index in JavaScript, use the array.splice() method. The array.splice() is a built-in method that adds, removes, and replaces elements in an array.

JavaScript does not have a built-in method to add elements at a specific array index.

Syntax

splice(index, no of items to remove, item1 . . . itemX)

Return value

An array. If we pass 0 as the number of elements to delete in the array, no element will be removed, but the new element will be inserted.

Example

let arr1=[36,54,43,323,5,5,4,3,2,1];

arr1.splice(3,0,1000);

console. log(`The new array after splice operation is: ${arr1}`);

Output

The new array after splice operation is: 36,54,43,1000,323,5,5,4,3,2,1

Explanation

The above code can be explained as follows:

  1. First, we created the array using the let keyword.
  2. Next, we used the splice() method. We passed three arguments that were 3,0,1000. The 3 means we must start our splice operation from the third index. Here the element present in the third index is 323. 0 means we need to delete no elements from the array. Finally, at the last 1000, we need to insert the element 1000 at the third index.

Adding elements at the start of the array(Using unshift Function)

Adding elements at the start of the array can be done using javascript’s unshift() function. This method will return an array whose size is one more than the previous array size.

The function can not only insert one but multiple elements at a time.

Syntax

unshift(all the elements to be inserted)

Return value

An array

Example

let arr=[36,54,43,323,5,5,4,3,2,1,];

arr.unshift(7);

console.log(arr);

Output

[7, 36, 54, 43, 323,

  5,  5,  4,  3,   2,

  1]

Explanation

The above code can be explained as follows:

  1. First, we have created an array named arr using the let keyword.
  2. Now we used the unshift() function to insert a new element into the array at the start of the array. Notice that we did not pass any other argument to the function.
  3. We inserted element 7 at the start of the array. Then, we printed the array in the console, checking that the element was successfully inserted into the array.

We can also insert multiple elements in the array using the unshift() function. The following code demonstrates the same:

Example

let arr=[36,54,43,323,5,5,4,3,2,1,];

arr.unshift(7,90,89);

console. log(`The new array is: ${arr}`);

Output

The new array is: 7,90,89,36,54,43,323,5,5,4,3,2,1

Notice that in this code, three elements in the array are inserted, i.e., 7,90,89.

Adding elements to the end of the array(Using Last Index of Array)

If we want to add the elements to the end of the array, then we can not have any in-built method in javascript. We can, however, apply some logic to achieve the same. We can directly add the desired element to the last of the array by using the index property.

Example

let arr=[36,54,43,323,5,5,4,3,2,1];


console.log(arr.length);


arr[arr.length]=99;


console. log(`The new array is: ${arr}`);


console.log(arr.length);

Output

10

The new array is: 36,54,43,323,5,5,4,3,2,1,99

11

Explanation

The above code can be explained as follows:

  1. First, we have created an array called arr using the let keyword.
  2. We know that the index of the last element of the array is one less than the array’s length. And we can append elements to an array using the indexing properly. So we have used the index as the array’s length to insert the element.
  3. We then printed the array in the console for cross-validation.

Concatenation of the array elements (Using concat Function)

Concatenation, as the name suggests, is an operation for merging elements. It creates a fresh copy of the elements from the old array and does not affect it. You can join or merge two or more arrays using the concat() function. It returns a new array, ultimately. However, this method can only add the new elements at the back of the array.

Example

let arr1=[36,54,43,323,5,5,4,3,2,1];

let arr2=[836,548,483,3623]

console.log(`The new array after concatenation is: ${arr1.concat(arr2)}`);

Output

The new array after concatenation is: 36,54,43,323,5,5,4,3,2,1,836,548,483,3623

We can also concatenate multiple arrays as follows:

Example

let arr1=[36,54,43,323,5,5,4,3,2,1];

let arr2=[836,548,483,3623];

let arr3=[90,54,7,5665,];

console.log(`The new array after concatenation is: ${arr1.concat(arr2,arr3)}`);

Output

The new array after concatenation is: 36,54,43,323,5,5,4,3,2,1,836,548,483,3623,90,54,7,5665

Pushing the elements using the push() function

push() function is very popular in all the programming languages and is widely used in many data structures. As the name suggests, the push () operation pushes new elements at the end of the array. It returns the new length of the array.

Example

let arr1=[36,54,43,323,5,5,4,3,2,1];

arr1.push(3);

console. log(`The new array after push operation is: ${arr1}`);

Output

The new array after push operation is: 36,54,43,323,5,5,4,3,2,1,3

Note that we have pushed one element, i.e., 3. And it is proved that the component got inserted at the back, as evident after printing the array in the console.

That’s it for this tutorial.

Leave a Comment