JavaScript - Append Array at Specific Position of Another Array

Here are the different approaches to appending an array at a specific position within another array in JavaScript.

Using splice() Method - Most Used

The splice() method is the most simple approach to insert elements at a specific position. It inserts elements of a2 at index 2 of a1 without removing any elements.

let a1 = [1, 2, 6];
let a2 = [3, 4, 5];
a1.splice(2, 0, ...a2);
console.log(a1);

[ 1, 2, 3, 4, 5, 6 ]

Using Slice and Spread Operator

It creates a new array without modifying the original. It splits a1 at a specific point and joins it with a2 using the spread operator.

let a1 = [1, 2, 6];
let a2 = [3, 4, 5];
let pos = 2;
let res = [...a1.slice(0, pos), ...a2, ...a1.slice(pos)];
console.log(res);

[ 1, 2, 3, 4, 5, 6 ]

Using for Loop

It inserts items into a specific position in the array. It goes through each element of a2 and adds it to a1 at the given position using the splice() method.

let a1 = [1, 2, 6];
let a2 = [3, 4, 5];
let pos = 2;
for (let i = 0; i < a2.length; i++) {
    a1.splice(pos + i, 0, a2[i]);
}
console.log(a1); 

[ 1, 2, 3, 4, 5, 6 ]

Using concat() Method with Manual Position Handling

It combines slice() and concat() to keep the original arrays unchanged. It slices a1 at the chosen position and uses concat() to join it with a2.

let a1 = [1, 2, 6];
let a2 = [3, 4, 5];
let pos = 2;
let res = a1.slice(0, pos).concat(a2).concat(a1.slice(pos));
console.log(res); 

[ 1, 2, 3, 4, 5, 6 ]

Using reduce() Method

It’s a functional way to insert arrays. It uses reduce() to create a new array and adds a2 when it reaches the specified position.

let a1 = [1, 2, 6];
let a2 = [3, 4, 5];
let pos = 2;
let res = a1.reduce((acc, val, index) => {
    if (index === pos) acc.push(...a2);
    acc.push(val);
    return acc;
}, []);
console.log(res); 

[ 1, 2, 3, 4, 5, 6 ]

Using Array.prototype.flat() with Manual Manipulation

It merges the arrays and flattens them for easy insertion. It uses slicing and flat() to join the arrays into a single array.

let a1 = [1, 2, 6];
let a2 = [3, 4, 5];
let pos = 2;
let res = [a1.slice(0, pos), a2, a1.slice(pos)].flat();
console.log(res); 

[ 1, 2, 3, 4, 5, 6 ]

Which Approach to Use?

• splice() Method: Best when you want to modify the original array directly and quickly insert elements.
• Slice and Spread Operator: Ideal for creating a new array without changing the original arrays.
• for Loop: Useful when you need control and flexibility over how elements are inserted.
• concat() Method: Great for immutability when you need to insert elements without modifying the original arrays.
• reduce() Method: Suitable if you prefer a functional approach.
• flat() Method: Helpful when you prefer concise, clean code with slicing and flattening.