How to remove duplicate elements from an array of objects in JavaScript?
Tags: javascript
Published: 2021-04-03 00:00:00

---
  title: How to remove duplicate elements from an array of objects in JavaScript?
  published: true
  tags: JavaScript
  date: Sat Apr 03 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/remove-duplicate-elements-from-array-of-objects-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-ca84515955bba9f9b1db9b166460d95e.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/remove-duplicate-elements-from-array-of-objects-javascript)
  
To remove duplicate elements from an array of objects, the basic idea is to first initialize a `Set()` object to hold unique values. Then looping over the array of objects and checking if the object property we want to check is in the `Set` object. If the property is already present in the `Set` object we should filter it out from the array and if it is not present we should keep it in the array.

### TL;DR

```js
// initialize a Set object
const uniqueValuesSet = new Set();

// array of objects with duplicate values
const arr = [
  { name: "John Doe" },
  { name: "John Doe" },
  { name: "Lily Roy" },
  { name: "Helen" },
];

const filteredArr = arr.filter((obj) => {
  // check if name property value is already in the set
  const isPresentInSet = uniqueValuesSet.has(obj.name);

  // add name property value to Set
  uniqueValuesSet.add(obj.name);

  // return the negated value of
  // isPresentInSet variable
  return !isPresentInSet;
});
```

Now let's understand this step by step.

Let's say i have an array with some objects as elements, the objects has property called `name` where some of the values are repeated more than once like this,

```js
// array of objects with duplicate values
const arr = [
  { name: "John Doe" },
  { name: "John Doe" },
  { name: "Lily Roy" },
  { name: "Helen" },
];
```

To remove these duplicate object elements first let's create a [`Set`](https://melvingeorge.me/blog/introduction-to-set-javascript) object to hold unique values. It can be done like this,

```js
// initialize a Set object
const uniqueValuesSet = new Set();

// array of objects with duplicate values
const arr = [
  { name: "John Doe" },
  { name: "John Doe" },
  { name: "Lily Roy" },
  { name: "Helen" },
];
```

Now let' use the array [`filter()`](https://melvingeorge.me/blog/array-filter-method-javascript) method to loop over each array elements (in our case objects are the elements) and filter out some elements based on certain condition. It can be done like this,

```js
// initialize a Set object
const uniqueValuesSet = new Set();

// array of objects with duplicate values
const arr = [
  { name: "John Doe" },
  { name: "John Doe" },
  { name: "Lily Roy" },
  { name: "Helen" },
];

const filteredArr = arr.filter((obj) => {
  // some condition to check
});
```

Now inside the `filter()` method, we can write the logic to filter out the array elements.

First, let's check if the current object's name property value is already present in the `Set` object using the `has()` method like this,

```js
// initialize a Set object
const uniqueValuesSet = new Set();

// array of objects with duplicate values
const arr = [
  { name: "John Doe" },
  { name: "John Doe" },
  { name: "Lily Roy" },
  { name: "Helen" },
];

const filteredArr = arr.filter((obj) => {
  // check if name property value is already in the set
  const isPresentInSet = uniqueValuesSet.has(obj.name);
});
```

Now we are going to add the current object's `name` property value anyway to the `Set`.

**Since the `Set()` object will only add the elements if they are not already present in the Set. This helps us in keeping the Set with unique values**

It can be done like this,

```js
// initialize a Set object
const uniqueValuesSet = new Set();

// array of objects with duplicate values
const arr = [
  { name: "John Doe" },
  { name: "John Doe" },
  { name: "Lily Roy" },
  { name: "Helen" },
];

const filteredArr = arr.filter((obj) => {
  // check if name property value is already in the set
  const isPresentInSet = uniqueValuesSet.has(obj.name);

  // add name property value to Set
  uniqueValuesSet.add(obj.name);
});
```

Now at last let's return the negated value of the `isPresentInSet` variable thus filtering out those elements which are already in the Set.

It can be one like this,

```js
// initialize a Set object
const uniqueValuesSet = new Set();

// array of objects with duplicate values
const arr = [
  { name: "John Doe" },
  { name: "John Doe" },
  { name: "Lily Roy" },
  { name: "Helen" },
];

const filteredArr = arr.filter((obj) => {
  // check if name property value is already in the set
  const isPresentInSet = uniqueValuesSet.has(obj.name);

  // add name property value to Set
  uniqueValuesSet.add(obj.name);

  // return the negated value of
  // isPresentInSet variable
  return !isPresentInSet;
});

console.log(filteredArr);

/*

OUTPUT:

[
    { name: "John Doe" },
    { name: "Lily Roy" },
    { name: "Helen" },
]

*/
```

- If boolean `true` is returned the filter method keeps the array element and filter out the element is `false` is returned.

See the above code live in [JSBin](https://jsbin.com/sitopowegi/2/edit?js,console).

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

---