There are a few ways how you can join two arrays in JavaScript, a spread syntax, a concat() method, and a push() method.

1. Joining arrays with the Spread syntax
2. Joining arrays with the concat() method
3. Joining arrays with the push() method
4. Dealing with duplicates

Often joining two arrays is called array merging.

Given you have two arrays:

const fruits = ['banana', 'apple']
const veggies = ['corn', 'pumpkin']

Joining arrays with the Spread syntax

The spread syntax (or spread operator) is used when items from and iterable need to be expanded, e.g. in the array.

So to join fruits and veggies arrays, we’ll create a new variable and assign it a new array:

const foods = [...fruits, ...veggies]
foods // ['banana', 'apple', 'corn', 'pumpkin']

Using this approach you can actually join multiple arrays:

const foods = [...fruits, ...veggies, ...dairy, ...grains]

Browser support for the Spread syntax: supported in all major browsers except IE.

Joining arrays with the .concat() method

The concat() method is used to merge two or more arrays.

You can use it the similar way as the above example, create a new variable and assign it a merged array:

const foods = fruits.concat(veggies)
foods // ['banana', 'apple', 'corn', 'pumpkin']

NOTE: The concat() method does not change the existing arrays but instead returns a new array.

To join multiple arrays, just specify each array as an additional argument to the concat() method:

// another way to use the concat method
const foods = [].concat(fruits, veggies, dairy, grains)

Browser support for the concat() method: supported in all major browsers.

Joining arrays with the .push() method

In case you want to join arrays and update the value of the initial array (mutate it) you can use the push() method.

The push() method adds one or more elements to the end of an array. In order to push a whole array, you’ll need to use the Spread syntax:

fruits.push(...veggies)
fruits // ['banana', 'apple', 'corn', 'pumpkin']

The push() methods accept multiple arguments, so you can join multiple arrays into one:

fruits.push(...veggies, ...dairy, ...grains)

The push() method is a useful approach inside the loops when you need to update the existing array.

Browser support for the push() method: supported in all major browsers.

Dealing with duplicates

In case the array items you’re joining are strings or numbers, there might be a case when you need to merge duplicate values. So that each item is unique and appears once in the array.

To deal with duplicates you can use the Set object and assign it to a new variable:

const fruits = ['banana', 'apple', 'tomato']
const veggies = ['corn', 'pumpkin', 'tomato']

const foods = [...new Set([...fruits, ...veggies])]
foods // ['banana', 'apple', 'tomato', 'corn', 'pumpkin']

In case you’re joining arrays that hold objects or mixed type value items I recommend using the lodash library to check for duplicates and merge them.

Example from lodash using the unionWith method to join two arrays that has a duplicate item:

var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]
var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }]

_.unionWith(objects, others, _.isEqual)

// => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 1 }]