Merging arrays means combining two or more arrays into a single array. It is a common operation in JavaScript essential for tasks such as combining results from different API calls or simply organizing data. Understanding how to effectively merge arrays in JavaScript can save time and make your code more efficient.

In this article, we’ll explore three effective ways to merge arrays in JavaScript: the concat method, the spread operator, and the push with the spread operator.

1. Merge using the spread operator

The spread operator is used to spread out elements of an array or object. The Spread operator is denoted by three dots […]

let arr1 = ['red','yellow'];
let arr2 = ['blue','green'];
let mergedArr = [...arr1, ...arr2];

console.log(mergedArr); // Output: ['red','yellow','blue','green']

This is the easiest and fastest way to merge arrays. It lets you merge 2 or even more than 2 arrays at once. The order of array elements will be in the same order in which it is merged.

In the above example, first arr1 elements will be placed after than arr2 elements will be merged.

You can also use the spread operator to insert elements into the middle of an array.

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

let mergedArr = [...arr1, 99999, ...arr2];
console.log(mergedArr); // Output: [1, 2, 3, 99999, 4, 5, 6]

2. Merge using array.concat()

The array.concat() method is used to merge two or more arrays. This method does not update the existing array but instead returns new array. so if you want to keep your original array intact then you may consider using this to merge arrays.

let arr1 = ['red','yellow'];
let arr2 = ['blue','green'];
let mergedArr = arr1.concat(arr2);

console.log(mergedArr); // Output: ['red','yellow','blue','green']

Let’s see how to concatenate three arrays using array.concat()

const num1 = [1, 2];
const num2 = [3, 4, 5];
const num3 = [6, 7];

const numbers = num1.concat(num2, num3);

console.log(numbers);
// results in [1, 2, 3, 4, 5, 6, 7]

3. Merge using push with spread operator

By combining the push() method with the spread operator, you can easily merge two arrays by pushing all elements from one array into another.

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
arr1.push(...arr2);

console.log(arr1); // Output: [1, 2, 3, 4, 5, 6]

When using push we must aware of that it updates the array on which it is used, so make sure this should not cause any unexpected results.

Now, Let’s see how to merge three arrays using this method

let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = [5, 6];

arr1.push(...arr2, ...arr3);

console.log(arr1); // Output: [1, 2, 3, 4, 5, 6]

Wrapping Up

In this article, we see three ways to merge arrays in JavaScript. concat() can be used on two or more arrays and it does not update the original arrays, instead it returns new array. Merging using spread operator is simple and easy to use, it also does not modifies the original array. Using push method is also useful but one must use with caution as it updates the original array.