Remove Duplicates from an Array of Objects in JavaScript

avatar

Borislav Hadzhiev

7 min

banner

Photo from Unsplash

Remove Duplicates from an Array of Objects in JavaScript #

To remove the duplicates from an array of objects:

  1. Create an empty array that will store the unique object IDs.
  2. Use the Array.filter() method to filter the array of objects.
  3. Only include objects with unique IDs in the new array.
index.js
// ✅ If you need to check for uniqueness based on a single property
const arr = [
  {id: 1, name: 'Tom'},
  {id: 1, name: 'Tom'},
  {id: 2, name: 'Nick'},
  {id: 2, name: 'Nick'},
];

const uniqueIds = [];

const unique = arr.filter(element => {
  const isDuplicate = uniqueIds.includes(element.id);

  if (!isDuplicate) {
    uniqueIds.push(element.id);

    return true;
  }

  return false;
});

// 👇️ [{id: 1, name: 'Tom'}, {id: 2, name: 'Nick'}]
console.log(unique);

// ------------------------------------------------------------
// ------------------------------------------------------------
// ------------------------------------------------------------

// ✅ If you need to check for uniqueness based on multiple properties

const arr2 = [
  {id: 1, name: 'Tom'},
  {id: 1, name: 'Tom'},
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Nick'},
  {id: 2, name: 'Nick'},
  {id: 2, name: 'Bob'},
];

const unique2 = arr2.filter((obj, index) => {
  return index === arr2.findIndex(o => obj.id === o.id && obj.name === o.name);
});

// [
//   { id: 1, name: 'Tom' },
//   { id: 1, name: 'Alice' },
//   { id: 2, name: 'Nick' },
//   { id: 2, name: 'Bob' }
// ]
console.log(unique2);

The function we passed to the Array.filter() method gets called with each element (object) in the array.

On each iteration, we check if the unique IDs array contains the ID of the current object.

If the ID is contained in the unique IDs array, we have a duplicate.

If the ID isn't contained in the unique IDs array, we add the ID to the array and return true from the function.

The Array.filter() method only adds an element to the results array if the function passed to the method returns a truthy value.

The results array doesn't contain any duplicates.

We used the id property as the object's identifier in the example. In your case, the object's identifier might be called something else.

In essence, our solution is to only add unique IDs to the uniqueIds array and only add the object to the results array if the object's ID is not in the uniqueIds array.

If you have to remove the duplicates from an array of objects often, create a reusable function.

index.js
const arr = [
  {id: 1, name: 'Tom'},
  {id: 1, name: 'Tom'},
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Nick'},
  {id: 2, name: 'James'},
];

function removeDuplicateObjects(array, property) {
  const uniqueIds = [];

  const unique = array.filter(element => {
    const isDuplicate = uniqueIds.includes(element[property]);

    if (!isDuplicate) {
      uniqueIds.push(element[property]);

      return true;
    }

    return false;
  });

  return unique;
}

// [ { id: 1, name: 'Tom' }, { id: 2, name: 'Nick' } ]
console.log(removeDuplicateObjects(arr, 'id'));

// [
//   { id: 1, name: 'Tom' },
//   { id: 1, name: 'Alice' },
//   { id: 2, name: 'Nick' },
//   { id: 2, name: 'James' }
// ]
console.log(removeDuplicateObjects(arr, 'name'));

The removeDuplicateObjects function takes an array of objects and the name of a property and removes the duplicate objects from the array based on the property.

We can also use a Set object to remove all duplicates from an array of objects.

Remove Duplicates from an Array of Objects using Set() #

To remove the duplicates from an array of objects:

  1. Create an empty Set that will store the unique object IDs.
  2. Use the Array.filter() method to filter the array of objects.
  3. Only include objects with unique IDs in the new array.
index.js
const arr = [
  {id: 1, name: 'Tom'},
  {id: 1, name: 'Tom'},
  {id: 2, name: 'Nick'},
  {id: 2, name: 'Nick'},
];

const uniqueIds = new Set();

const unique = arr.filter(element => {
  const isDuplicate = uniqueIds.has(element.id);

  uniqueIds.add(element.id);

  if (!isDuplicate) {
    return true;
  }

  return false;
});

// 👇️ [{id: 1, name: 'Tom'}, {id: 2, name: 'Nick'}]
console.log(unique);

Set objects only store unique values, so even if we add the same value to a Set multiple times, the value is only contained once in the Set.

We used the same approach, however, we don't have to check before adding each ID to the Set because duplicate IDs get automatically removed.

Instead of using the includes() method, we use the has() method on the Set object and instead of pushing the ID into the uniqueIds array, we use the add() method on the Set.

Remove Duplicates from an Array of Objects using findIndex() #

To remove all duplicates from an array of objects:

  1. Use the Array.filter() method to iterate over the array.
  2. Use the Array.findIndex() method to check if each object is repeated in the array.
  3. The new array won't contain any duplicate objects.
index.js
// ✅ If you need to check for uniqueness based on a single property

const arr = [
  {id: 1, name: 'Tom'},
  {id: 1, name: 'Tom'},
  {id: 2, name: 'Nick'},
  {id: 2, name: 'Nick'},
];

const unique = arr.filter((obj, index) => {
  return index === arr.findIndex(o => obj.id === o.id);
});

// 👇️ [ { id: 1, name: 'Tom' }, { id: 2, name: 'Nick' } ]
console.log(unique);

// ------------------------------------------------
// ------------------------------------------------
// ------------------------------------------------

// ✅ If you need to check for uniqueness based on multiple properties

const arr2 = [
  {id: 1, name: 'Tom'},
  {id: 1, name: 'Tom'},
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Nick'},
  {id: 2, name: 'Nick'},
  {id: 2, name: 'Bob'},
];

const unique2 = arr2.filter((obj, index) => {
  return index === arr2.findIndex(o => obj.id === o.id && obj.name === o.name);
});

// [
//   { id: 1, name: 'Tom' },
//   { id: 1, name: 'Alice' },
//   { id: 2, name: 'Nick' },
//   { id: 2, name: 'Bob' }
// ]
console.log(unique2);

The first code sample checks for duplicate objects in the array based on a single property and the second checks for duplicate objects based on multiple properties.

We used the Array.filter() method to iterate over the array.

index.js
const arr = [
  {id: 1, name: 'Tom'},
  {id: 1, name: 'Tom'},
  {id: 2, name: 'Nick'},
  {id: 2, name: 'Nick'},
];

const unique = arr.filter((obj, index) => {
  return index === arr.findIndex(o => obj.id === o.id);
});

// 👇️ [ { id: 1, name: 'Tom' }, { id: 2, name: 'Nick' } ]
console.log(unique);

The filter() method returns a new array containing only the objects for which the callback function returned a truthy value.

The Array.findIndex() method returns the index of the first object in the array for which the callback function returned a truthy value or -1 if the condition is never met.

index.js
const arr = [
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Bob'},
  {id: 3, name: 'Carl'},
  {id: 4, name: 'Dean'},
];

console.log(arr.findIndex(obj => obj.name === 'Bob')); // 👉️ 1

The last step is to check if the index of the current iteration is equal to index of the matching object.

If there are multiple, duplicate objects in the array, we only include the first one.

If you only want to include the last duplicate object, use the Array.findLastIndex() method instead.

index.js
const arr = [
  {id: 1, name: 'Tom'},
  {id: 1, name: 'Tom', age: 30},
  {id: 2, name: 'Nick'},
  {id: 2, name: 'Nick', age: 40},
];

const unique = arr.filter((obj, index) => {
  return index === arr.findLastIndex(o => obj.id === o.id);
});

// 👇️ [ { id: 1, name: 'Tom', age: 30 }, { id: 2, name: 'Nick', age: 40 } ]
console.log(unique);

The code sample keeps the last duplicate object in the new array.

The Array.findLastIndex() method iterates over the array in reverse order and returns the index of the first element that satisfies the provided testing function.

The no elements satisfy the test, the method returns -1.

If you need to check for uniqueness based on multiple conditions, use the logical AND (&&) operator.

index.js
const arr2 = [
  {id: 1, name: 'Tom'},
  {id: 1, name: 'Tom'},
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Nick'},
  {id: 2, name: 'Nick'},
  {id: 2, name: 'Bob'},
];

const unique2 = arr2.filter((obj, index) => {
  return index === arr2.findIndex(o => obj.id === o.id && obj.name === o.name);
});

// [
//   { id: 1, name: 'Tom' },
//   { id: 1, name: 'Alice' },
//   { id: 2, name: 'Nick' },
//   { id: 2, name: 'Bob' }
// ]
console.log(unique2);

The code sample uses the logical AND (&&) operator to check for uniqueness based on the id and name properties.

There are multiple objects with the same id value but not all of them have the same name, so multiple objects with the same id are contained in the final array.

Alternatively, you can use a Map object.

Remove Duplicates from an Array of Objects using findIndex() #

To remove the duplicates from an array of objects:

  1. Use the Array.map() function to get an array of object IDs and objects.
  2. Use the object identifiers as the keys in a Map.
  3. A Map object stores unique keys, so any of the duplicates get removed.
index.js
const arr = [
  {id: 1, name: 'Tom'},
  {id: 1, name: 'Tom'},
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Nick'},
  {id: 2, name: 'James'},
];


function removeDuplicateObjects(arr, property) {
  return [...new Map(arr.map(obj => [obj[property], obj])).values()];
}

// [ { id: 1, name: 'Alice' }, { id: 2, name: 'James' } ]
console.log(removeDuplicateObjects(arr, 'id'));

// [
//   { id: 1, name: 'Tom' },
//   { id: 1, name: 'Alice' },
//   { id: 2, name: 'Nick' },
//   { id: 2, name: 'James' }
// ]
console.log(removeDuplicateObjects(arr, 'name'));

We used the Array.map() function to get an array of subarrays containing the ID of each object and the object itself.

index.js
const arr = [
  {id: 1, name: 'Tom'},
  {id: 1, name: 'Tom'},
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Nick'},
  {id: 2, name: 'James'},
];

// [
//   [ 1, { id: 1, name: 'Tom' } ],
//   [ 1, { id: 1, name: 'Tom' } ],
//   [ 1, { id: 1, name: 'Alice' } ],
//   [ 2, { id: 2, name: 'Nick' } ],
//   [ 2, { id: 2, name: 'James' } ]
// ]
console.log(arr.map(obj => [obj['id'], obj]));

This is necessary in order to create a Map object.

Maps are very similar to regular objects, they store unique keys. If a key already exists in the Map and we set the same key, its value gets updated.

The last step is to call the values() method on the Map to get the unique objects.

Which approach you pick is a matter of personal preference. I'd use the Array.filter() method with includes() as I find it quite direct and intuitive.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.
About
Contacts
Policy
Terms & Conditions
TwitterGitHubLinkedin

Copyright © 2023 Borislav Hadzhiev

0
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........