How to Combine Arrays in JavaScript

by

To combine arrays in JavaScript, use the concat() method. The concat() is a built-in JavaScript method that merges two or more two arrays. The concat() function returns a new array containing the joined arrays. It does not change an existing array.

Syntax

Array.concat(array1, array2, array3,..., arrayX)

Parameters

  1. Array1 – The second array to be merged with “Array“.
  2. Array2 – The third array to be merged with “Array“.
  3. ArrayX – Nth array that is to be merged with “Array“.

Example

arr1 = ['hp', 'dell', 'mac'];
arr2 = ['lenovo', 'msi', 'asus'];

console.log(arr1.concat(arr2));

Output

[ 'hp', 'dell', 'mac', 'lenovo', 'msi', 'asus' ]

You can see that the concat() function has combined an arr1 with the arr2 and gives us a combined array in the output. Now a question might arise, what if we want to combine more than two arrays in JavaScript. However, you can also see that it doesn’t modify or change the existing array.

Combining more than two arrays in JavaScript

To combine more than two arrays in JavaScript, use the array.concat() method. The concat() method accepts more than two arrays and returns, combining them into one array.

arr1 = ['hp', 'dell', 'mac'];
arr2 = ['lenovo', 'msi', 'asus'];
arr3 = ['Microsoft', 'LG', 'Acer'];
arr4 = ['Razer', 'Samsung', 'Xiaomi']

const combinedArray = [].concat(arr1, arr2, arr3, arr4);

console.log(combinedArray);

Output

[
   'hp', 'dell',
   'mac', 'lenovo',
   'msi', 'asus',
   'Microsoft', 'LG',
   'Acer', 'Razer',
   'Samsung', 'Xiaomi'
]

We can combine the value of all four arrays by writing them up in the concat method and separating them by a comma(,).

How does the concat() method work

The array.concat() method checks for all the values in the array, checks the number of arrays and then concatenates it. 

arr1 = ['hp', 'dell', 'mac'];
arr2 = ['lenovo', 'msi', 'asus'];
arr3 = ['Microsoft', 'LG', 'Acer'];

console.log(arr1.concat(1, 2, 3));

Output

[ 'hp', 'dell', 'mac', 1, 2, 3 ]

Here we can see how we can even insert values into an array with the help of the concat method in JavaScript.

Combining arrays using spread operator in JavaScript

The spread is a built-in JavaScript operator(...) used to expand or spread an iterable or an array. The spread operator allows us to copy all or part of an existing array into another array. The spread operator is often used in combination with destructuring.

Syntax

[… Array1, …Array2, …Array3, ..., ArrayN]

Arguments

  1. Array1   – It is the first array in which the rest arrays are to be combined.
  2. Array2  – It is the second array that is to be combined with the first array.
  3. ArrayN – It is the nth array to be combined with the first array.

Example

arr1 = ['hp', 'dell', 'mac'];
arr2 = ['lenovo', 'msi', 'asus'];
arr3 = ['Microsoft', 'LG', 'Acer'];

console.log([...arr1, ...arr2, ...arr3]);

Output

[
   'hp', 'dell',
   'mac', 'lenovo',
   'msi', 'asus',
   'Microsoft', 'LG',
   'Acer'
]

You can tell that the spread operator approach is a shortcut way to combine arrays as the code lines are reduced and easy to remember. Spread is excellent when you know beforehand that you are working with arrays.

Array concat vs. Spread operator

The main difference between concat() and spread operator is its use cases. If you know that you are dealing with arrays, use the spread operator but if you might be dealing with the possibility of a non-array data type like strings or objects, use the concat() method to merge an array.

Merging arrays with push() method in JavaScript

The array push() is a built-in JavaScript method used to push any value at the end of an array, and it can also be used to merge two arrays by pushing the values of the second array in the first array after the already present values.

Syntax

Array.push(…Array2, );

Arguments

Array – It is the first array in which the rest arrays are to be combined.

Array2 – It is the second array that is to be combined with the first array.

Example

Let’s combine arrays using the Spread operator.

arr1 = ['hp', 'dell', 'mac'];
arr2 = ['lenovo', 'msi', 'asus'];
arr3 = ['Microsoft', 'LG', 'Acer'];

let pushmethod = []
pushmethod.push(...arr1, ...arr2, ...arr3)
console.log(pushmethod)

Output

[
   'hp', 'dell','mac', 
   'lenovo','msi', 'asus',
   'Microsoft', 'LG','Acer'
]

In this example, we saw that we used the combination of push() method and spread operator to combine multiple arrays into one array in JavaScript.

Conclusion

In this tutorial, we learned how to combine an array with the help of the concat() method, spread operator, and array push() method. My opinion is that use the spread operator to combine arrays because it is the easiest and most concise way.

That’s it for this tutorial.

See also

How to Convert Javascript Array to JSON

JavaScript array count

How to check if a variable is an array

Leave a Comment