How to Merge Arrays in JavaScript: 3 Simple Methods

In JavaScript, merging arrays is a common task that developers perform when they need to combine multiple arrays into one. Fortunately, JavaScript provides several easy ways to merge arrays. In this post, we’ll go over some of the most common methods, and by the end, you’ll know how to combine arrays in a simple and effective way.

Method 1: Using Concat()

The concat() method is one of the most straightforward ways to merge arrays. It creates a new array by combining the existing arrays, leaving the original arrays untouched.

Example:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const mergedArray = array1.concat(array2);

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

Explanation:

• concat(): This method combines array1 and array2 into a new array mergedArray. The original arrays remain unchanged.
• The result is a new array that contains all elements from both arrays in the order they were provided.

Method 2: Using the Spread Operator (...)

The spread operator (...) is a modern and concise way to merge arrays. It spreads the elements of an array into a new one.

Example:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const mergedArray = [...array1, ...array2];

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

Explanation:

• ... (spread operator): This operator takes all elements from array1 and array2 and spreads them into the new array mergedArray.
• It’s a clean and efficient way to merge arrays, especially when working with larger datasets or multiple arrays.

Method 3: Merging Multiple Arrays

Both the concat() method and the spread operator can be used to merge more than two arrays. Here’s how you can merge multiple arrays:

Using concat():

const array1 = [1, 2];
const array2 = [3, 4];
const array3 = [5, 6];

const mergedArray = array1.concat(array2, array3);

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

Using the Spread Operator:

const array1 = [1, 2];
const array2 = [3, 4];
const array3 = [5, 6];

const mergedArray = [...array1, ...array2, ...array3];

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

Subscribe to Youtube Channel

Conclusion

Merging arrays in JavaScript can be done in a variety of ways, from the simple concat() method to the modern spread operator. Here’s a quick recap:

• concat(): Simple and non-destructive, great for basic array merging.
• Spread Operator (...): Modern, clean, and concise.

Choose the method that best fits your needs based on the structure of your arrays and whether you want to modify the original arrays or not.

Happy coding!