JavaScript - Add Array to Array of Array

Here are the different methods to Array to an Array of Array (Multidimensional Array) in JavaScript

1. Using push() Method

The push() method is one of the most common ways to add an array to an array of arrays. It adds a new element (in this case, an array) to the end of the array.

let mat = [[1, 2], [3, 4]];
let a = [5, 6];

mat.push(a);

console.log(mat);

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

• push() adds the entire newArr as a new element to the arrOfArr.
• This method directly modifies the original array by adding a reference to the new array.

2. Using concat() Method

The concat() method creates a new array by merging two or more arrays. It does not modify the original arrays but returns a new array that combines them.

let mat = [[1, 2], [3, 4]];
let a = [5, 6];

let res = mat.concat([a]);

console.log(res);

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

• concat([newArr]) combines the arrOfArr with the newArr and returns a new array.
• The original arrOfArr is not modified, and the result is a new array: [[1, 2], [3, 4], [5, 6]].

3. Using Spread Operator (...)

The spread operator (...) is a modern and concise way to add elements (or arrays) into another array. It can be used to add an array to an array of arrays by expanding both arrays into a new array.

let mat = [[1, 2], [3, 4]];
let a = [5, 6];

let res = [...mat, a];

console.log(res);

• [...arrOfArr, newArr] creates a new array by spreading the elements of arrOfArr and then appending the newArr at the end.
• The resulting array is [[1, 2], [3, 4], [5, 6]].
• The original arrOfArr remains unchanged.

4. Using unshift() Method

The unshift() method adds a new element (array) to the beginning of the array. If you want to add an array to the front of an array of arrays, this method is the right choice.

let mat = [[1, 2], [3, 4]];
let a = [5, 6];

mat.unshift(a);

console.log(mat);

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

• unshift(newArr) adds the newArr to the beginning of arrOfArr.
• The result will be [[5, 6], [1, 2], [3, 4]].
• This method mutates the original array by adding the newArr at the start.

5. Using splice() Method

The splice() method can be used to add elements at any position in an array, not just at the beginning or the end. You can specify the index at which to insert the array.

let mat = [[1, 2], [3, 4]];
let a = [5, 6];

mat.splice(1, 0, a);

console.log(mat);

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

• splice(1, 0, newArr) adds newArr at index 1, which means it will be inserted between [1, 2] and [3, 4].
• After execution, arrOfArr becomes [[1, 2], [5, 6], [3, 4]].
• The splice() method is versatile as it allows insertion at any position in the array.

Which Approach to Choose?