How to merge two arrays and remove duplicates from the array in JavaScript?
Tags: javascript
Published: 2020-11-28 00:00:00

---
  title: How to merge two arrays and remove duplicates from the array in JavaScript?
  published: true
  tags: JavaScript
  date: Sat Nov 28 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/merge-two-arrays-and-remove-duplicate-elements-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-ab194edea7a09b73df9b53dfba95a61f.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/merge-two-arrays-and-remove-duplicate-elements-javascript)
  
[Jump to the full solution &rarr;](#full-solution)

### Step 1: Merge two arrays

To merge 2 arrays in JavaScript, we can use the `concat()` array method.

Consider this 2 arrays with some numbers repeated on both of the arrays,

```js
// arrays
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [3, 4, 5, 6, 7];
```

First let's merge this array using the `concat()` method in the `arr1` array like this,

```js
// arrays
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [3, 4, 5, 6, 7];

// merge arrays
// using the concat() method
// concat() method returns a new array
const arr3 = arr1.concat(arr2);

console.log(arr3); // [1, 2, 3, 4, 5, 3, 4, 5, 6, 7]
```

- The `concat()` method returns a new array after merging.

### Step 2: Remove Duplicate elements from an array

As you can see that after merging the arrays we have duplicate elements in our new array.

Now let's use the [`Set()`](https://melvingeorge.me/blog/remove-duplicate-elements-from-array-javascript) constructor function to remove duplicate or repeated elements.

So let's pass the new array `arr3` as an argument to the function like this,

```js
// arrays
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [3, 4, 5, 6, 7];

// merge arrays
// using the concat() method
// concat() method returns a new array
const arr3 = arr1.concat(arr2);

const uniqueElements = new Set(arr3);
```

Now, all we have to do is use the spread operator (`...`) to extract the unique elements from the Set collection into a new array.

It can be done like this,

```js
// arrays
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [3, 4, 5, 6, 7];

// merge arrays
// using the concat() method
// concat() method returns a new array
const arr3 = arr1.concat(arr2);

// use Set() constructor function
// to remove duplicate or repaeted elements
const uniqueElements = new Set(arr3);

// use the spread operator ...
// to extract values from Set collection
// to an array
const uniqueValArr = [...uniqueElements];

console.log(uniqueValArr); // [1, 2, 3, 4, 5, 6, 7]
```

Yay! We have successfully merged our 2 arrays and removed the duplicate elements from the array. 😃

<a name="full-solution"></a>

The above code can be further reduced like this,

```js
// arrays
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [3, 4, 5, 6, 7];

// merge arrays
// using the concat() method
// and use the Set() constructor function to get unique values
// and use the spread operator to extract unique values to an array
const uniqueValArr = [...new Set(arr1.concat(arr2))];

console.log(uniqueValArr); // [1, 2, 3, 4, 5, 6, 7]
```

See this example live in [JSBin](https://jsbin.com/nevobituhe/2/edit?js,console).

### Feel free to share if you found this useful 😃.

---