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

// 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,

// 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 object to hold unique values. It can be done like this,

// 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() 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,

// 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,

// 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,

// 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,

// 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.

Feel free to share if you found this useful 😃.

---