How to Filter Duplicate Objects From an Array in JavaScript

1. Only keep first object in array with property value

To filter duplicate objects from an array by a property in JavaScript, use the filter() method to filter out elements that are not the first in the array having the property value.

For example:

JavaScriptCopied!

const arr = [
  {
    name: 'John',
    location: 'Los Angeles',
  },
  {
    name: 'Kate',
    location: 'New York',
  },
  {
    name: 'Mike',
    location: 'New York',
  },
];

const unique = arr.filter(
  (obj, index) =>
    arr.findIndex((item) => item.location === obj.location) === index
);

/*
   [
     { name: 'John', location: 'Los Angeles' },
     { name: 'Kate', location: 'New York' }
   ]
 */
console.log(unique);

The Array filter() tests each element in an array against a condition specified by a callback function, and creates a new array filled with elements that pass the test. It doesn’t modify the original array.

JavaScriptCopied!

const arr = [1, 2, 3, 4];

const filtered = arr.filter((num) => num > 2);
console.log(filtered); // [ 3, 4 ]

The Array findIndex() method searches through elements in an array and returns the index of the first one that passes a test, specified by the callback function passed to it. We use it to find the first array element with the same property value as the object filter() is currently testing.

In our example, the filter() condition for the object is that its array index be the same as the result of findIndex(). If this condition is true, it will mean that the object is the first array element with the property value. If it’s false, it’ll mean that there’s already an array item with that property value, so the object is a duplicate and shouldn’t be included in the result.

JavaScriptCopied!

const arr = [
  {
    name: 'John',
    location: 'Los Angeles',
  },
  {
    name: 'Kate',
    location: 'New York',
  },
  {
    name: 'Mike',
    location: 'New York',
  },
];

// true - first object with location of New York
console.log(1 === arr.findIndex((obj) => obj.location === 'New York'));

// false - will not be included in result
console.log(2 === arr.findIndex((obj) => obj.location === 'New York'));

Filter duplicate objects from array by multiple properties

Depending on your scenario, you may want an object to be considered a duplicate only if it has two or more properties that have the same value – multiple property values that are the same.

For that case, we’ll use filter() and findIndex() as before, but we’ll add extra comparisons between filter()‘s object and findIndex()‘s object for all the properties.

For example:

JavaScriptCopied!

const arr = [
  {
    name: 'Kate',
    location: 'New York'
  },
  {
    name: 'Mike',
    location: 'New York'
  },
  {
    name: 'Kate',
    location: 'New York'
  }
];

const unique = arr.filter(
  (obj, index) =>
    arr.findIndex(
      (item) => item.location === obj.location && item.name === obj.name
    ) === index
)

/*
   [
      { name: 'Kate', location: 'New York' },
      { name: 'Mike', location: 'New York' }
   ]
 */
console.log(unique);

2. Exclude duplicates from unique array

Here’s another way to filter duplicate objects from an array in JavaScript:

1. Create an empty unique array that will store the unique objects.
2. Loop through the objects in the array.
3. For each object, add it to the unique array if it isn’t a duplicate. Otherwise, ignore it.

For example:

JavaScriptCopied!

const arr = [
  {
    name: 'John',
    location: 'Los Angeles',
  },
  {
    name: 'Kate',
    location: 'New York',
  },
  {
    name: 'Mike',
    location: 'New York',
  },
];

const unique = [];
for (const item of arr) {
  const isDuplicate = unique.find((obj) => obj.location === item.location);
  if (!isDuplicate) {
    unique.push(item);
  }
}

/*
   [
    { name: 'John', location: 'Los Angeles' },
    { name: 'Kate', location: 'New York' }
  ]
*/
console.log(unique);

We use the for...of loop to iterate over the array and perform an action for each object.

For each object, we use the find() method to check if it already exists in the unique array. Array find() searches for the first object in an array that passes a specified test, similar to findIndex(), but it returns the object itself instead of its array index.

JavaScriptCopied!

const nums = [2, 5, 8, 13, 19];

const doubleDigit = nums.find((num) => num > 9);

console.log(doubleDigit); // 13

If it’s not in the unique array, we simply add it with the push() method.

This method is not a one-liner like the first one, but you may find it easier to understand. It seems like the natural way you would go about removing duplicate items from a list as a human.

Filter duplicate objects from array by multiple properties

Like in the previous method, if multiple properties are used to determine if an object is a duplicate, you can simply add more checks for the properties – this time in the find() method:

JavaScriptCopied!

const arr = [
  {
    name: 'Kate',
    location: 'New York',
  },
  {
    name: 'Mike',
    location: 'New York',
  },
  {
    name: 'Kate',
    location: 'New York',
  },
];

const unique = [];
for (const item of arr) {
  // 👇 "name" and "location" used for duplicate check
  const duplicate = unique.find(
    (obj) => obj.location === item.location && obj.name === item.name
  );
  if (!duplicate) {
    unique.push(item);
  }
}

/*
  [
    { name: 'Kate', location: 'New York' },
    { name: 'Mike', location: 'New York' }
  ]
 */
console.log(unique);

Every Crazy Thing JavaScript Does

A captivating guide to the subtle caveats and lesser-known parts of JavaScript.