Merge Arrays and Remove Duplicates in JavaScript: 2 Efficient Methods

Merging Arrays and Eliminating Duplicates in JavaScript

When working with arrays in JavaScript, it’s common to encounter scenarios where you need to merge multiple arrays into one and remove duplicate elements. This process can be achieved using various methods, including the concat() function, Set data structure, and spread syntax.

Method 1: Concatenation and Looping

One approach to merge arrays and eliminate duplicates is by utilizing the concat() method and a for...of loop. This method involves concatenating the two arrays, then iterating through the resulting array to remove duplicates.

Let’s take a closer look at an example:
“`
const arr1 = [1, 2, 3];
const arr2 = [2, 3, 4];
const uniqueArr = [];

for (const element of arr1.concat(arr2)) {
if (uniqueArr.indexOf(element) === -1) {
uniqueArr.push(element);
}
}
console.log(uniqueArr); // Output: [1, 2, 3, 4]
“
In this example, theconcat()method merges the two arrays, and thefor…ofloop iterates through the resulting array. TheindexOf()method checks if an element is already present in theuniqueArrarray, and if not, it's added using thepush()` method.

Method 2: Spread Syntax and Set

Another approach to merge arrays and eliminate duplicates is by leveraging the spread syntax and Set data structure. This method involves spreading the array elements into a Set, which automatically removes duplicates, and then converting the Set back into an array.

Here’s an example:

const arr1 = [1, 2, 3];
const arr2 = [2, 3, 4];
const uniqueArr = [...new Set([...arr1,...arr2])];
console.log(uniqueArr); // Output: [1, 2, 3, 4]

In this example, the spread syntax is used to merge the two arrays into a single array, which is then converted into a Set. The Set automatically removes duplicates, and the spread syntax is used again to convert the Set back into an array.

Efficient Array Merging and Deduplication

Both methods demonstrate effective ways to merge arrays and eliminate duplicates in JavaScript. By choosing the right approach for your specific use case, you can ensure efficient and accurate array manipulation.