How to merge Arrays in JavaScript

There are several ways in which you can merge arrays in Javascript. You can use the spread operator, concat method, or use the well tested for loop and push technique. In this post, let us explore them in detail.

Merging Arrays in JavaScript

The Array in Javascript is a data structure that can store ordered collection items of various data types.

There are situations where you want to merge two are more arrays into a single array. For Example, you may get arrays from different data sources and need to join them before doing something useful with them.

There are five distinct ways to merge arrays in JavaScript

  1. Spread Operator
  2. The concat() method
  3. push method
  4. for each

Merging Arrays using the spread operator

The spread operator is the most preferred and efficient way to merge two arrays in JavaScript. spread operator takes an iterable object like an arrayobjectstring, etc., and spreads its contents.

The spread syntax consists of three dots followed by the name of the array or object (iterable).

For example, let’s say you have an array of numbers called numbers. To spread it, we will use the statement ...numbers. Javascript will replace …numbers with the content of the array.

How Spread Operator works in Javascript

We can merge two or more arrays by using the array literal and spreading out the existing array inside the array literal. The syntax is as shown below.

const mergedArray = […array1, …array2, …array3, …arrayN];

Where array1, array2, array3, etc., are arrays. You can merge any number of arrays.

The code below joins the two arrays into a single array of numbers.

The spread operator always returns the new array. It will not alter the existing arrays.

Merging Arrays with the Concat Method

The Concat method takes two or more arrays as arguments and returns a new merged array that contains the elements of all the arrays.

Concat method does not modify the original arrays i.e. it does not mutate the original array. It will always return a new array.

The following example shows how to merge two arrays.

You can merge any number of arrays. The code below merges three arrays.

Calling Array.prototype.concat directly.

Like the spread operator, the contact always returns the new array. It will not alter the existing arrays.

Merging Arrays with the Push Method

The push method is another way to merge two arrays in JavaScript.

The array push method inserts a new elements to the end of an existing array. It takes the element to be added as an argument and returns the array’s new length.

We can insert one or more arrays into another array using push method along with the spread operator.

In the following example, we merge OrigArray with numArr1.

The code below merges two arrays with the OrigArray.

Note that the push method mutates the original array, i.e., it modifies the original array.

Unshift method

Unshift method is very similar to the push method except that it inserts a new value at the start of the array.

But remember unshift method needs to shift all existing elements to a higher index to make room for the new element at the start of the array. This makes it slower compared to all other methods. This is more noticeable as the array gets larger. Push method is faster as it inserts the element to end of the array, hence no need to shift elements.

For Loop

Using For Loop, we can iterate through an array and insert its values into another array or a new array. We can also run some custom checks on the inserted elements. It will help us filter and transform the elements before merging the arrays.

For Loop is very flexible and gives complete control to you. And its performance is as good as the push and spread operator.

ForEach loop

ForEach method is similar and is as flexible as for loop. We can loop through one of the arrays and push its values into an array. Just like For Loop, forEach is also is very flexible and gives complete control to you.

The code below merges numArr1 with numArr.

Merging two arrays into a new array.

Transform and Merge Arrays

There are several use cases where we would like to transform the array before we merge them. For Example, we would like to modify the values of the existing array, filter some of the elements, etc.

JavaScript arrays offer several methods like map, filter, reduce, or sort to transform the array. You can then merge it with another array using the concat method or the spread operator (…).

Array Map method

The Array map method is another alternative to merge arrays when you wish to transform the array before joining. The map method returns a new array after changing the given array with new values based on specific conditions. You can then use the conact method to create a new merged array.

The code below multiplies each array element with two and merges them using the concat.

Array Filter method

The array filter can be used to filter out unwanted values before merging them

You can also use the sort & reduce methods to transform the array


  1. In JavaScript, merging arrays involves combining two or more arrays into a single array.
  2. The spread operator (…), push() method, and concat() method is commonly used to merge arrays.
  3. You can also use the for loop or for each loop to merge arrays, which offers maximum flexibility.
  4. You can combine Map, filter, sort, and reduce methods to transform the array before merging.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top