Merge Arrays In JavaScript

In JavaScript, arrays are useful data structures for storing various types of values, like numbers and strings. They can be easily changed since they are mutable. In this guide, we’ll cover the basics of JavaScript array, also show different way of merging arrays in JS.

Arrays in JavaScript

In JavaScript, an array is a flexible data structure used to store multiple items in a single variable. Array can hold values of any type, like numbers, strings, other arrays, object or even combination of all. Since arrays are mutable, you can modify their contents after creation. This means you can add, change, or remove items as needed. The following are some of the different types of array.

# Integer Array
integer_array = [1, 2, 3, 4, 5]

# Array of Strings
str_array = ["one", "Two","Three"]

# Mixed Array
mix_array = [True, 2, "Three", 4.0, { key: "value" }]

# Empty Array
empty_array = []

# Nested Array
nested_array = [[1, 2, 3, 4, 5], ["one", "Two","Three"], [True, 2, "Three", 4.0], []]

Different way of merging Arrays in JavaScript

Now we will see the different way of merging arrays in JavaScript.

1. Using the concat() Method

Using the concat() method, we can creates a new array by merging two or more arrays without modifying the original ones.

let array1 = [1, 2, 3];
let array2 = ["a", "b", "c"];

let merged_array = array1.concat(array2);
console.log(merged_array); // Output: [1, 2, 3, "a", "b", "c"]

2. Using reduce() Method

The reduce() function can be used to merge multiple arrays into one.

let arrays = [[1, 2], ["a", "b"], [3, 4]];
let merged_array = arrays.reduce((acc, curr) => acc.concat(curr), []);

console.log(merged_array); // Output: [1, 2, "a", "b", 3, 4]

3. Using the Spread (...) Operator

The spread operator (...) is a modern way to combine arrays by taking elements from several arrays and putting them into a new one.

let array1 = [1, 2, 3];
let array2 = ["a", "b", "c"];

let merged_array = [...array1, ...array2];
console.log(merged_array); // Output: [1, 2, 3, "a", "b", "c"]

4. Using the push() Method with the Spread Operator

You can use push() along with the spread operator to add elements of one array into another.

let array1 = [1, 2, 3];
let array2 = ["a", "b", "c"];

array1.push(...array2);
console.log(array1); // Output: [1, 2, 3, "a", "b", "c"]

5. Using a for Loop

Merging arrays can be done simply with a for loop to add elements one by one.

let array1 = [1, 2, 3];
let array2 = ["a", "b", "c"];

let merged_array = [];
for (let item of array1) {
    merged_array.push(item);
}
for (let item of array2) {
    merged_array.push(item);
}

console.log(merged_array); // Output: [1, 2, 3, "a", "b", "c"]

6. Using Array.prototype.splice()

The splice() method can be used to insert the elements of one array into another.

let array1 = [1, 2, 3];
let array2 = ["a", "b", "c"];

array1.splice(array1.length, 0, ...array2);
console.log(array1); // Output: [1, 2, 3, "a", "b", "c"]

7. Using flat() Method (For Nested Arrays)

The flat() method flattens nested arrays into a single array.

let arrays = [[1, 2], ["a", "b"], [3, 4]];

let merged_array = arrays.flat();
console.log(merged_array); // Output: [1, 2, "a", "b", 3, 4]

Conclusion

In this blog, we’ve covered various ways to merge arrays in JavaScript, For simply merging two array we can use concat() and the spread operator (...). Also for better performance we can use spread operator (...). To modify the original array, use push() and splice(). While working with nested array use flat() and reduce().