[Edit]

JavaScript - merge two arrays and de-duplicate items

1 contributors

2 contributions

0 discussions

0 points

Created by:

Mariam-Barron

811

In this article, we would like to show you how to merge two arrays and remove duplicate items using JavaScript.

Quick solution:

xxxxxxxxxx
 
const array1 = ['A', 'B'];
const array2 = ['B', 'C'];
​
const array3 = array1.concat(array2)
                     .filter((item, index, array) => array.indexOf(item) === index);
​
console.log(array3);

Auto running

Practical examples

Edit

1. Set based approach

Edit

In this example, we use Set based approach to prevent item duplication while adding them to the result array.

xxxxxxxxxx
 
const mergeArrays = (...arrays) => {
    const result = [];
    const blocker = new Set(); // prevents item duplication
    for (const array of arrays) {
        for (const item of array) {
            if (blocker.has(item)) {
                continue;
            }
            blocker.add(item);
            result.push(item);
        }
    }
    return result;
};
​
​
// Usage example:
​
const array1 = ['A', 'B'];
const array2 = ['B', 'C'];
​
console.log(mergeArrays(array1, array2));  // ['A', 'B', 'C']

Auto running

2. Simple types approach

Edit

In this example, we use simple types to merge arrays without duplicates.

xxxxxxxxxx
 
const mergeArrays = (...arrays) => {
    const result = [];
    const blocker = {}; // prevents item duplication
    for (const array of arrays) {
        for (const item of array) {
            if (blocker.hasOwnProperty(item)) {
                continue;
            }
            blocker[item] = true;
            result.push(item);
        }
    }
    return result;
};
​
​
// Usage example:
​
const array1 = ['A', 'B'];
const array2 = ['B', 'C'];
​
console.log(mergeArrays(array1, array2));  // ['A', 'B', 'C']