How to Merge Two Arrays and Remove Duplicate Items in JavaScript? (original) (raw)

Last Updated : 11 Nov, 2024

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

JavaScript `

// 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.

JavaScript `

// 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 )

JavaScript `

// 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 );

JavaScript `

// 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 ]