Removing Duplicate Objects in a JavaScript Array

Removing duplicate objects in an array can take some effort.

It’s not as simple as removing duplicate primitive values from an array.

In this article, we’ll look at how to remove duplicate objects from an array.

Eliminating Duplicates Values from Arrays

Removing duplicate values is simple.

We just convert it to a set and then spread it back to an array.

For instance, we can write:

const arr = ['foo', 'bar', 'foo'];
const uniqueArr = [...new Set(arr)];

Then we get [“foo”, “bar”] as the value of uniqueArr .

This won’t work with objects since only objects with the same reference are considered the same.

Create New Array without Duplicates

One way to remove duplicates is to create a new array without the duplicate entries.

For example, if we have the following array:

const persons = [{
    firstName: 'jane',
    lastName: 'snith',
    age: 20
  },
  {
    firstName: 'bob',
    lastName: 'jones',
    age: 33,
  },
  {
    firstName: 'jane',
    lastName: 'snith',
    age: 20
  },
];

Then we can check each object for existence in the array with the unique entries.

If it doesn’t already exist, we put it into the array with unique values.

To do that, we can write the following code:

const uniquePersons = [];

for (const p of persons) {
  if (!contains(uniquePersons, p)) {
    uniquePersons.push(p);
  }
}

function contains(arr, person) {
  return arr.find(
    (a) => a.firstName === person.firstName && a.lastName === person.lastName && a.age === person.age);
}

We have the uniquePersons array to hold the array entries with the unique entries from the persons array.

The contains function returns if the item exists in the arr array.

person is the object from persons we wan to check.

We call arr.find with the condition that we want to return to check for the properties of person to determine existence.

In the for-of loop, we only call push on uniquePersons to add items from persons that doesn’t already exist.

In the end, uniquePersons is:

[
  {
    "firstName": "jane",
    "lastName": "snith",
    "age": 20
  },
  {
    "firstName": "bob",
    "lastName": "jones",
    "age": 33
  }
]

Using filter()

Another way to remove duplicate objects from an array is to use the filter method to check if the object is the first instance of the object.

To do that, we can write:

const uniquePersons = persons.filter(
  (m, index, ms) => getFirstIndex(ms, m) === index);

function getFirstIndex(arr, person) {
  return arr.findIndex(
    (a) => a.firstName === person.firstName && a.lastName === person.lastName && a.age === person.age);
}

given that we have

const persons = [{
    firstName: 'jane',
    lastName: 'snith',
    age: 20
  },
  {
    firstName: 'bob',
    lastName: 'jones',
    age: 33,
  },
  {
    firstName: 'jane',
    lastName: 'snith',
    age: 20
  },
];

as the value of persons .

We created the getFirstIndex method that takes an arr array and the person object.

Inside the function, we call findIndex to return the first index with of the array entry with the given value of person.firstName , person.lastName , and person.age .

Then in the filter callback, we can call getFirstIndex to compare the index with the returned index.

If they’re different, then we know the object is a duplicate, so it’ll be discarded.

In the end, we get the same result.

Create a Map and Convert it Back to an Array

Another way to remove the entries is to create a map from the array and then convert it back to an array.

For instance, we can write:

const map = new Map();for (const p of persons) {
  map.set(JSON.stringify(p), p);
}

const uniquePersons = [...map.values()]

given that person is the same as the other examples.

We just add the items into the map with the set method. The stringified version of the object if the key and the non-stringified version is the value.

Since strings can be compared with === , duplicates will be overwritten.

Then we can spread the items back to an array by getting them with map.values() and using the spread operator.

Conclusion

Removing duplicate objects takes more work than removing duplicate primitive values.

Array methods and maps make this easier.