Join two arrays and remove duplicate elements using Javascript

In this post, you will learn to merge two arrays and remove duplicate values from them after merging. We will explain different methods in Javascript to do this task.

const arr1 = [10, 20, 30, 40, 50];
const arr2 = [40, 50, 60, 70, 80];

// concatenate the above arrays using spread operator
const join_arr = [...arr1, ...arr2];
console.log(join_arr);

// remove duplicate from above array using Set() function
const result = [...new Set(join_arr)];
console.log(result);

Output

[10,20,30,40,50,40,50,60,70,80]
[10,20,30,40,50,60,70,80]

We are using the spread operator and Set() function in the above code example. The spread operator that we are using to merge two or multiple arrays using the below syntax.

[...arr1, ...arr2, ...arr3]

The Set() function is used to remove the duplicates from an array. We can use the below code for that.

[...new Set(Array)]

More methods that we will be using to perform the same task can be found below.

The above code example can be written in one line as below.

# Code example 2

const arr1 = [10, 20, 30, 40, 50];
const arr2 = [40, 50, 60, 70, 80];

const result = [...new Set([...arr1, ...arr2])];

console.log(result);

Output

[10,20,30,40,50,60,70,80]

Try it yourself

Use Set() and concat() function to merge and remove duplicates from arrays

The concat() function in Javascript is used to merge two or multiple arrays. We will be using it to join our arrays and then removing the repeating values from the array using the Set() function.

concat() function syntax

array1.concat(array2)

If you are using ES6 you can also use concat() function as below

[].concat(...[array1, array2, array3])

# Code example 3

const arr1 = [10, 20, 30, 40, 50];
const arr2 = [40, 50, 60, 70, 80];

const result = [...new Set([].concat(...[arr1, arr2]))];

console.log(result);

Output

[10,20,30,40,50,60,70,80]

Try it yourself

Using concat() and For loop to merge and remove duplicates from an Array

As we know from the previous code examples we can use the concat() function to merge two or multiple arrays into one. We will use Javascript For Loop to remove the duplicate elements from the array merged using the concat() function.

# Code example 4

const names1 = ["Rick", "James", "Nora", "Clark", "Rohit"];
const names2 = ["Carol", "Handricks", "Clark", "Stephen", "James"];

// merge the above arrays
const names = names1.concat(names2);

// use for loop to remove duplicate items
for (var i = 0; i < names.length; ++i) {
    for (var j = i + 1; j < names.length; ++j) {
        if (names[i] === names[j])
            names.splice(j--, 1);
    }
}

console.log(names);

Output

["Rick","James","Nora","Clark","Rohit","Carol","Handricks","Stephen"]

Try it yourself

Using concat() and filter() functions

We have already learned the concat() function working process. Now we will use the filter() function along with it to merge and remove duplicates from two arrays in Javascript.

# Code example 5

const arr1 = [10, 20, 30, 40];
const arr2 = [50, 40, 90, 20, 10]

var result = arr1.concat(arr2.filter((item) => arr1.indexOf(item) == -1));

console.log(result);

Output

[10,20,30,40,50,90]

Try it yourself

Conclusion

These are some working code examples that we have listed above to concatenate two or more arrays into a single one along with removing duplicate items from it. If you have more ways in mind to do the same, you can contribute the code by clicking on the below button.

Was this helpful?