Merge Arrays in JavaScript with concat() and push() [Examples]

This tutorial will show you the correct ways to merge two or more arrays in JavaScript with the concat method – and provide a warning about how not to merge arrays.

Merging/Joining Arrays in JavaScript with the concat()* Method

The concat() method exists with one purpose – to merge arrays.

concat() Method Syntax

array.concat(ARRAYS)

Note that:

• array is the first array of the arrays to be joined
• ARRAYS should be a comma-separated list of arrays to be added to the first array
  • They will be joined in the order of appearance
• concat() returns a new array – the array which calls it, and the arrays which are passed to it are not modified

Example – Merge Arrays with the concat() Method

Below are examples of arrays being merged with the concat() method. Note that in each example, the result of concat() is assigned to a new variable as the original arrays are not modified by it.

Merging two arrays:

var myFirstArray = ['apple', 'banana', 'pear'];
var mySecondArray = ['dog', 'cat', 'bird', 'horse']; 

var myMergedArray = myFirstArray.concat(mySecondArray);

This will result in a new array, myMergedArray, with the following value:

[
    "apple",
    "banana",
    "pear",
    "dog",
    "cat",
    "bird",
    "horse"
]

Merging multiple arrays:

var myFirstArray = ['apple', 'banana', 'pear'];
var mySecondArray = ['dog', 'cat', 'bird', 'horse']; 

var myMergedArray = myFirstArray.concat(mySecondArray, ['tree', 'flower', 'grass']);

[
    "apple",
    "banana",
    "pear",
    "dog",
    "cat",
    "bird",
    "horse",
    "tree",
    "flower",
    "grass"
]

Above, multiple arrays are merged – notice that the third array wasn’t previously declared as a variable – array type values can be passed directly to concat().

THE WRONG WAY – How The push() Method should NOT be Used to Merge/Concatenate Arrays

Before I show you the right way to use the push() method to merge arrays, it’s worth showing a common mistake made when trying to do so that you can avoid it.

The push() method is intended for appending values to an array. As it can be used to append multiple values to an array, you might think it can be used to merge two arrays by passing an array to it.

This is not the case – if you pass an array to the push method, it will be added as a child of the array you are trying to merge with – not added!

Here’s a quick demonstration:

var myFirstArray = ['apple', 'banana', 'pear'];
var mySecondArray = ['dog', 'cat', 'bird', 'horse']; 

myFirstArray.push(mySecondArray);

Here’s what myFirstArray looks like after the above:

[
    "apple",
    "banana",
    "pear",
    [
        "dog",
        "cat",
        "bird",
        "horse"
    ]
]

The arrays have not been merged! The second array has been added as an element to the first, rather than the elements of both arrays being combined.

THE RIGHT WAY – How The push() Method SHOULD be Used to Merge Arrays

It is possible to use spread syntax to push the contents of one array into another, effectively merging them by adding the contents of the second array to the first:

var myFirstArray = ['apple', 'banana', 'pear'];
var mySecondArray = ['dog', 'cat', 'bird', 'horse']; 

myFirstArray.push(...mySecondArray);

This will result in the intended merging behavior, updating myFirstArray to look like the following:

[
    "apple",
    "banana",
    "pear",
    "dog",
    "cat",
    "bird",
    "horse"
]

Notice the … in the push() method? It’s the spread syntax – it expands the contents of the array and passes them as arguments to push() individually rather than passing the whole array as one.

I’d recommend avoiding this method unless your specific situation calls for it – your code should be clear in purpose so that anyone reading it knows what you’re trying to do. Using concat() is unambiguous – you are concatenating two arrays.

A lot more can be done with arrays in JavaScript – all covered in our articles here.