Creating an Array of Unique Objects in Javascript

I recently uncovered a nifty trick to be able to create a unique array of objects in Javascript that you should definitely add to your tool belt.

Have you ever found yourself building up some sort of array that contains objects that may contain duplicates? What I mean is ending up with something like this:

const arrayOfObjs = [
  {id: '123', code: 'ABC'},
  {id: '456', code: 'DEF'},
  {id: '123', code: 'ABC'},
  ...
]

So, how can we remove the duplicates here?

In these sorts of situations my instinct is to use lodash, but this can be done with plain old Javascript.

By utilizing the Map constructor and creating a new Map instance, this array can be filtered down to unique values.

const arrayOfObjsMap = new Map(
  arrayOgObjs.map((item) => {
    return [JSON.stringify(item), item];
  }),
);

const uniqueArrayOfObjs = arrayOfObjsMap.values();

This method of removing duplicates from the array takes advantage of the fact that keys in Maps are unique, so the removal of duplicates will inherently be taken care of through the construction of this Map.

The Map constructor can take an iterable (per the MDN docs) which can represent key-value pairs for the Map object. So, by using JSON.stringify() on the iteratees of our array we are able to create a unique string when constructing our Map keys which serves as the unique identifier for our objects. Then by simply calling values() on the new Map instance we are back to having an array of objects but now we have no duplicates.

Hope you find this useful!