How to Merge Two Arrays and Remove Duplicate Items in JavaScript?
Given two arrays, the task is to merge both arrays and remove duplicate items from merged array in JavaScript. The basic method to merge two arrays without duplicate items is using spread operator and the set constructor.
1. Using Spread Operator and Set() Constructor
The Spread Operator is used to merge two arrays and then use the Set() constructor to remove the duplicate items from the merged array.
Syntax
let s = new Set( arr1, arr2 ); // Set to remove duplicate values
let newArr = [ ...s]; // Convert set to array using spread operator// Given arrays
let a1 = [10, 20, 30, 40];
let a2 = [30, 40, 50, 70];
// Crete set to eleminate the duplicates
let s = new Set([ ...a1, ...a2] );
// Convet the set beack to array
let a = [...s];
// Display the output
console.log("Merged Array: ", a);
Output
Merged Array: [ 10, 20, 30, 40, 50, 70 ]
2. Using concat() Method and Set() Object
The concat() method is used to merge two arrays and then use the Set() object to remove the duplicate items from the merged array.
// Given arrays
let a1 = [10, 20, 30, 40];
let a2 = [30, 40, 50, 70];
// Use concat() methd to merge the arrays
// and Set() to eliminate duplicates
let s = new Set(a1.concat(a2));
// Convert the set back to an array
let a = [...s];
// Display the output
console.log("Merged array:", a);
Output
Merged array: [ 10, 20, 30, 40, 50, 70 ]
Using for Loop and indexOf() Method
Using for loop and indexOf() method iterates through one array and checks if each item is already present in the merged array. If not found (`indexOf` returns `-1`), the item is added, effectively merging the arrays and removing duplicates.
Syntax
for ( Initialization ; condition ; increament ){
// code to be executed...
}
array.indexOf( element )// Given arrays
let a1 = [10, 20, 30, 40];
let a2 = [30, 40, 50, 70];
// Create a new array for the merged values
let a = [...a1];
// Loop through each element in the second array
for (let i = 0; i < a2.length; i++) {
// Check non-existing elements and
// add the merged array
if (a.indexOf(a2[i]) === -1) {
a.push(a2[i]);
}
}
// Display the output
console.log("Merged Array: ", a);
Output
Merged Array: [ 10, 20, 30, 40, 50, 70 ]
Using JavaScript Map
The JavaScriopt Map uses the unique keys to ensure that duplicate elements are removed. By converting each element to a key-value pair, we can create a unique collection of elements from both arrays.
Syntax
let m = new Map();
m.set( key, value );// Given arrays
let a1 = [10, 20, 30, 40];
let a2 = [30, 40, 50, 70];
// Create a Map to store unique elements
let map = new Map();
// Add elements from the first array to the map
a1.forEach((element) => {
map.set(element, true);
});
// Add elements from the second array to the map
a2.forEach((element) => {
map.set(element, true);
});
// Convert the map keys back to an array
let a = Array.from(map.keys());
// Display the output
console.log("Merged Array: ", a);
Output
Merged Array: [ 10, 20, 30, 40, 50, 70 ]
