👨🏽‍💻 How to merge Arrays in JavaScript

JavaScript Arrays are list-like objects whose prototype exposes methods to perform traversal and mutation operations. Often times you'd be working with multiple arrays and would want to merge them. In this post, let's look at some of the ways we can merge arrays in JavaScript.

Array.concat()

The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

const vegetables = ['Cabbage', 'Carrot']
const fruits = ['Apple', 'Papaya']
const merge = fruits.concat(vegetables)

console.log(merge) // => ['Apple', 'Papaya', 'Cabbage', 'Carrot']

The concat() method accepts multiple arrays as arguments, so you can merge 2 or more arrays at once:

const merge = [].concat(array1, array2, array3, arrayN)

Spread syntax (...)

Spread syntax (...) allows an iterable such as an array expression or string to be expanded and can to be included in a list of some kind. It is commonly used when you want to add a new item to a local variable, or add a new item to a list of exisiting items. A very simple version of this kind of action could look like so:

let numberStore = [0, 1, 2]
let newNumber = 12

numberStore = [...numberStore, newNumber]
console.log(numberStore) // => [0, 1, 2, 12];

numberStore = [...numberStore, newNumber]
console.log(numberStore) // => [0, 1, 2, 12, 12];

For merging two arrays, the syntax would be const merge = [...array1, ...array2];. Let's use ... instead of concat() from the above example:

const vegetables = ['Cabbage', 'Carrot']
const fruits = ['Apple', 'Papaya']
const merge = [...fruits, ...vegetables]

console.log(merge) // => ['Apple', 'Papaya', 'Cabbage', 'Carrot']

We can also add additional items in between when using ... like:

const vegetables = ['Cabbage', 'Carrot']
const fruits = ['Apple', 'Papaya']
const merge = [...fruits, 'Tomato', ...vegetables]

console.log(merge) // => ['Apple', 'Papaya', 'Tomato', Cabbage', 'Carrot']

Array.push()

The push() method adds one or more elements to the end of an array and returns the new length of the array.

let numberStore = [0, 1, 2]
let total = numberStore.push(12)
console.log(numberStore) // => [0, 1, 2, 12];
console.log(total) // => 4

We can use ... in combination with Array.push() to merge arrays.

const vegetables = ['Cabbage', 'Carrot']
const more_vegetables = ['Brocolli', 'Spinach']

let total = vegetables.push(...more_vegetables)
console.log(vegetables) // => ['Cabbage', 'Carrot', 'Brocolli', 'Spinach'];
console.log(total) // => 4

Which to use when?

I prefer using ..., because I find it more concise and easier to write. Although, there are still benefits of using Array.concat().

Spread works well when you know that the source is an array. But if the source is a string, then we have a problem. Let's see an example:

const isArray = [1, 2, 3]
const notArray = 'random'

const merge = [...isArray, ...notArray]
console.log(merge) // => [ 1, 2, 3, 'r', 'a', 'n', 'd', 'o', 'm' ] 🤨

When we use ... with a string, it will split the word into separate characters. But, if we use Array.concat(),

const isArray = [1, 2, 3]
const notArray = 'random'

const merge = isArray.concat(notArray)
console.log(merge) // => [ 1, 2, 3, 'random' ] ✅

And of course, there's always the good old Array.push(), but remember that concat() returns a new array, but push() mutates the source array.