What is the most efficient way to concatenate N arrays in JavaScript ?

In this article, we will see how to concatenate N arrays in JavaScript. The efficient way to concatenate N arrays can depend on the number of arrays and the size of arrays.

To concatenate N arrays, we use the following methods:

Method 1: Using push() Method

We create the N arrays and then concatenate the array by using the push() method. In this, we also use the spread operator(...) which iterates over each of the values.

const arr1 = [11, 12, 13];
const arr2 = [14, 15, 16];
const arr3 = [17, 18, 19];
const arr4 = [1, 3, 7];
arr1.push(...arr2,...arr3,...arr4);
console.log(arr1);

[
  11, 12, 13, 14, 15,
  16, 17, 18, 19,  1,
   3,  7
]

Method 2: Using concat() Method

First, we will create N arrays and then apply the concat() method to concatenate N arrays. The concat() method is used to merge N arrays together. This method does not alter the original arrays and returns the new Array.

Example:

const arr1 = [11, 12, 13],
      arr2 = [14, 15, 16],
      arr3 = [17, 18, 19],
      arr4 = [1, 3, 7];

const arr = arr1.concat(arr2, arr3, arr4);

console.log(arr);

[
  11, 12, 13, 14, 15,
  16, 17, 18, 19,  1,
   3,  7
]

Method 3: Using Spread Operator

You can also use Spread Operator to concatenate N arrays. For this, first, we will create N arrays and then apply Spread Operator to concatenate N arrays. 

Note: This method is faster and less memory intensive than the concat() method.

Example:

const arr1 = [11, 12, 13],
      arr2 = [14, 15, 16],
      arr3 = [17, 18, 19],
      arr4 = [1, 3, 7];

const arr = [...arr1, ...arr2, ...arr3, ...arr4];

console.log(arr);

[
  11, 12, 13, 14, 15,
  16, 17, 18, 19,  1,
   3,  7
]

Method 4: Using Array.from with Mapping Function:

Using Array.from with a mapping function efficiently concatenates arrays. The mapping function combines multiple arrays into a single array by spreading them within Array.from, resulting in a concatenated array with concise syntax and good performance

Example: In this example we concatenates three arrays (array1, array2, array3) using the spread operator and Array.from(), creating a single concatenatedArray with all elements. It then logs the combined array to the console.

const array1 = [1, 2];
const array2 = [3, 4];
const array3 = [5, 6];

const concatenatedArray = Array.from([...array1, ...array2, ...array3]);
console.log(concatenatedArray); 

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

Method 5: Using reduce() Method

The reduce() method can be used to concatenate multiple arrays into a single array by accumulating the arrays one by one. This method is versatile and allows you to handle dynamic numbers of arrays efficiently.

const arr1 = [11, 12, 13];
const arr2 = [14, 15, 16];
const arr3 = [17, 18, 19];
const arr4 = [1, 3, 7];

const arrays = [arr1, arr2, arr3, arr4];

const concatenatedArray = arrays.reduce((acc, curr) => acc.concat(curr), []);

console.log(concatenatedArray);

[
  11, 12, 13, 14, 15,
  16, 17, 18, 19,  1,
   3,  7
]