JavaScript - Inserting Multiple Items at Specific Index in JS Array
Last Updated :
15 Nov, 2024
We can insert an item into Array at a specific index using the JavaScript Array splice method. This method removes the elements from the mentioned index and add items at that specific position.
1. Using array.splice() Method
JavaScript array.splice() Method is an inbuilt method in JavaScript that is used to modify the contents of an array by removing the existing elements and/or by adding new elements.
JavaScript
let a = [10, 20, 30, 40, 50];
const a1 = [99, 100, 101];
const a2 = 2;
a.splice(a2, 0, ...a1);
console.log(a);
Output[
10, 20, 99, 100,
101, 30, 40, 50
]
2. Using JavaScript for Loop
The JavaScript for loop can be used to move all the elements from the index (where the new element is to be inserted) to the end of the array, one place after its current place. The required element can then be placed at the index.
JavaScript
let a = [10, 20, 30, 40, 50];
let idx = 2;
let a2 = [99, 100, 101];
for (let i = a.length; i > idx; i--) {
a[i + a2.length - 1] = a[i - 1];
}
for (let i = 0; i < a2.length; i++) {
a[idx + i] = a2[i];
}
console.log(a);
Output[
10, 20, 99, 100,
101, 30, 40, 50
]
3. Using the concat() Method
The JavaScript concat() Method used to merge two or more arrays together. This method does not alter the original arrays passed as arguments but instead, returns a new Array.
JavaScript
let a = [10, 20, 30, 40, 50];
let i = 2;
let a1 = [99, 100, 101];
let a2 = a.slice(0, i).concat(a1, a.slice(i));
console.log(a2);
Output[
10, 20, 99, 100,
101, 30, 40, 50
]
4. Using Spread Syntax With Array.slice() method
JS array.slice() method is used to select and return items as a new array. Create a new array by slicing before and after the index, then spread the new item between them.
JavaScript
let a = [10, 20, 30, 40, 50];
const i = 2;
const a1 = [99, 100, 101];
a = [...a.slice(0, i), ...a1, ...a.slice(i)];
console.log(a);
Output[
10, 20, 99, 100,
101, 30, 40, 50
]
5. Using Array.from() Method
JS Array.from() method creates a new, shallow-copied Array instance from an array-like or iterable object. This method can be used to create a new array with the desired element inserted at the specified index.
JavaScript
let a = [10, 20, 30, 40, 50];
let a1 = [99, 100, 101];
let index = 2;
let a2 = Array.from(
{ length: a.length + a1.length },
(_, i) =>
i < index ? a[i] : i < index + a1.length ? a1[i - index] : a[i - a1.length]
);
console.log(a2);
Output[
10, 20, 99, 100,
101, 30, 40, 50
]
6. Using Array.reduce() Method
The array.reduce() method iterates over the array and constructs a new array with the desired element inserted at the specified index.
JavaScript
const a = [1, 2, 3, 4, 5];
const index = 2;
const a1 = [99, 100, 101];
const a2 = a.reduce((acc, curr, i) => {
if (i === index) acc.push(...a1);
acc.push(curr);
return acc;
}, []);
console.log(a2);
Output[
1, 2, 99, 100,
101, 3, 4, 5
]
Similar Reads
How to Add Elements to a JavaScript Array? Here are different ways to add elements to an array in JavaScript.1. Using push() MethodThe push() method adds one or more elements to the end of an array and returns the new length of the array.Syntaxarray.push( element1, element2, . . ., elementN );JavaScriptconst arr = [10, 20, 30, 40]; arr.push(
3 min read
Create an Array of Given Size in JavaScript The basic method to create an array is by using the Array constructor. We can initialize an array of certain length just by passing a single integer argument to the JavaScript array constructor. This will create an array of the given size with undefined values.Syntaxconst arr = new Array( length );J
3 min read
Insert at the Beginning of an Array in JavaScript Following are different ways to add new elements at the beginning of an array1. Using the Array unshift() Method - Most Used:Adding new elements at the beginning of the existing array can be done by using the Array unshift() method. This method is similar to the push() method but it adds an element
2 min read
Remove Elements From a JavaScript Array Here are the various methods to remove elements from a JavaScript ArrayRemove elements from Array1. Using pop() methodThe pop() method removes and returns the last element of an array. This function decreases the length of the array by 1 every time the element is removed.javascriptlet a = ["Apple",
6 min read
Remove Duplicate Elements from JavaScript Array To Remove the elements from an array we can use the JavaScript set method. Removing duplicate elements requires checking if the element is present more than one time in the array. 1. Using JavaScript Set() - Mostly UsedThe JavaScript Set() method creates an object containing only unique values. To r
3 min read
How to Remove Multiple Elements from Array in JavaScript? Here are various methods to remove multiple elements from an array in JavaScript1. Using filter() MethodThe filter() method creates a new array with the elements that pass the condition. This method does not change the original array.JavaScriptlet a = [1, 2, 3, 4, 5]; let remove = [2, 4]; a = a.filt
3 min read
Insert at the Beginning of an Array in JavaScript Following are different ways to add new elements at the beginning of an array1. Using the Array unshift() Method - Most Used:Adding new elements at the beginning of the existing array can be done by using the Array unshift() method. This method is similar to the push() method but it adds an element
2 min read
Reverse an Array in JavaScript Here are the different methods to reverse an array in JavaScript1. Using the reverse() MethodJavaScript provides a built-in array method called reverse() that reverses the elements of the array in place. This method mutates the original array and returns the reversed array.JavaScriptlet a = [1, 2, 3
3 min read
JavaScript - Delete last Occurrence from JS Array These are the following ways to remove the last Item from the given array: 1. Using pop() Method (Simple and Easiest Method for Any Array) The pop() method is used to get the last element of the given array it can also be used to remove the last element from the given array. JavaScriptlet a = [34, 2
2 min read
Remove Empty Elements from an Array in JavaScript Here are different approaches to remove empty elements from an Array in JavaScript.1. Using array.filter() MethodThe array filter() method is used to create a new array from a given array consisting of elements that satisfy given conditions.array.filter( callback( element, index, arr ), thisValue )J
3 min read