3 Easy Ways to Merge Arrays in JavaScript

Here are three ways to merge arrays in JavaScript:

1. Using the “Spread Operator(…)”.
2. Using the “Array.prototype.concat()” Method.
3. Using the “Array.prototype.push()” Method.

Method 1: Using the Spread Operator(…)

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]

Parameters

1. Array1 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.

Method 2: Using the Array.prototype.concat() Method

To combine arrays in JavaScript, you can use the “Array.prototype.concat()” method. The concat() is a built-in method that merges two or more two arrays. It 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.

Method 3: Using the array.push() method

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, );

Parameters

1. Array: 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.

Example

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 combined the push() method and spread operator to combine multiple arrays into one array in JavaScript.

Krunal

Krunal Lathiya is a seasoned Computer Science expert with over eight years in the tech industry. He boasts deep knowledge in Data Science and Machine Learning. Versed in Python, JavaScript, PHP, R, and Golang. Skilled in frameworks like Angular and React and platforms such as Node.js. His expertise spans both front-end and back-end development. His proficiency in the Python language stands as a testament to his versatility and commitment to the craft.