Updated March 21, 2023
Introduction to Merge Arrays in JavaScript
In this topic, we will learn how to merge arrays together in JavaScript. Also, we will learn how to get the unique elements in the resulted merge array or remove duplicate elements from the resulted merge array. In this topic, we will explain the three different ways to merge arrays and get the resultant merge array in JavaScript.
Methods of JavaScript Merge Arrays
Below are the methods of JavaScript Merge Arrays mentioned:
Method 1 – Javascript concat Method
This method is used for merging two or more arrays in JavaScript. This method returns a new array and doesn’t change the existing arrays.
Syntax:
const result_array = array1.concat([item1[, item2[, ...[, itemN]]]])Parameters:
Arrays and/or values to concatenate or merged into a new array.
Return:
A new Array instance.
Example #1
In this example, we have taken two arrays and have merged them using the JavaScript concat() method. Both the arrays have unique items.
const arr1 = ['A', 'B', 'C', 'D'];
const arr2 = ['E', 'F', 'G'];
const result = arr1.concat(arr2);
console.log(result);Output:
As we have seen, the concat() method merged both the arrays and returns a new array with the result.
Example #2
In this example, we have taken three arrays and have merged them using the JavaScript concat() method. All the arrays have unique elements initially.
const arr1 = ['A', 'B', 'C', 'D'];
const arr2 = ['E', 'F', 'G'];
const arr3 = ['H', 'I'];
const result = arr1.concat(arr2, arr3);
console.log(result);Output:
As we have already seen the syntax of the concat() method that it can merge one or more arrays together. And now we have seen this through the above example on three arrays.
Example #3
In this example, we will see whether the concat method removes duplicate elements or not.
const arr1 = ['A', 'B', 'C', 'D'];
const arr2 = ['E', 'F', 'G', 'A'];
const result = arr1.concat(arr2);
console.log(result);Output:
As we have seen that the concat method helps in merging arrays together but not able to remove duplicate elements from them.
Example #4
In this example, we will use the filter method on the result merged array to get the unique elements in the result or remove duplicate elements from the result.
const arr1 = ['A','B','C'];
const arr2 = ['D','E','A','F','C'];
const result = arr1.concat(arr2)
const d = result.filter((item, pos) => result.indexOf(item) === pos)
console.log(d);Output:
As we have seen in this above example that to remove the duplicate elements from the resulted merge array, we have used the JavaScript filter() method.
Example #5
In this example, we will another method to get the unique elements in the result or remove duplicate elements from the result.
const arr1 = ['A','B','C'];
const arr2 = ['D','E','A','F','C'];
console.log(Array.from(new Set(arr1.concat(arr2))));Output:
In this example, we have passed our resulted merge array to the JavaScript Set as Sets have the property to remove duplicate elements, but they return set instead of the array. So, by using Array. from, we have converted our result from set to array.
Method 2 – Javascript Spread Operator
Using this operator, each array expanded to allow the array values to be set in the new array.
Syntax:
For Array and String:
[...array_name, '6'];Example #1
In this example, we will see how the javaScript spread operator works in merging the arrays.
const arr1 = ['A', 'B', 'C', 'D'];
const arr2 = ['E', 'F', 'G'];
const arr3 = ['H', 'I'];
const result = [...arr1,...arr2,...arr3];
console.log(result);Output:
In this example, we have learned how to use JavaScript to spread syntax for merging arrays. But it is not a preferable choice by the developers and not recommended to use as on large data sets this will work slower in comparison to the JavaScript concat() method.
Example #2
In this example, we will see whether the spread syntax method removes the duplicate elements or not.
const arr1 = ['A', 'B', 'C', 'D'];
const arr2 = ['E', 'F', 'G', 'A'];
const result = [...arr1,...arr2];
console.log(result);Output:
As we have seen that the spread syntax method helps in merging arrays together but not able to remove duplicate elements from them.
Example #3
In this example, we will see how to get the unique elements in the result or remove duplicate elements from the result.
const arr1 = ['A','B','C'];
const arr2 = ['D','E','A','F','C'];
const arr3 = [...new Set([...arr1 ,...arr2])];
console.log(arr3);Output:
In this example, we have passed our resulted merge array to the JavaScript Set as Sets have the property to remove duplicate elements, but they return set instead of the array. So, by defining Array, we have converted our result from set to array.
Method 3 – Javascript Array push Method
This method adds one or more items at the end of the array and returns the length of the new array.
Syntax:
array_name.push(item1[, ...[, itemN]])Parameters:
ItemN – The items to add at the end of the array.
Return:
The new length of the array on which this push method has been called.
Example #1
In this example, we will see how the Array push method works in merging the arrays.
const arr1 = ['A','B','C'];
const arr2 = ['D','E','A','F','C'];
const lengthofcombinedarray = arr1.push(...arr2);
console.log(arr1);
console.log(lengthofcombinedarray);Output:
Example #2
In this example, we will how to get the unique elements in the result or remove duplicate elements from the result.
const arr1 = ['A','B','C'];
const arr2 = ['D','E','A','F','C'];
arr1.push(...arr2);
const result = [...new Set(arr1)]
console.log(result);Output:
Conclusion – JavaScript Merge Arrays
In some programming languages, we use an additional operator to merge arrays together, but JavaScript provides different methods that we can use for merging arrays. So, we have learned three different ways in JavaScript to merge arrays together.
Recommended Articles
This is a guide to JavaScript Merge Arrays. Here we discuss the basic concept, three different ways to merge arrays and get the resultant merge array in JavaScript. You may also have a look at the following articles to learn more –
