How to Use
Set object comes in. Here’s how to use
Set to filter a list of unique primitive values, objects by reference, or objects by their contents (values).
Set in insertion order.
In other words, you can loop through a
In this article, you’ll learn how to use
Set to handle the common task of finding a list of unique items in an array, whether you need to find unique primitive values (like numbers or strings) or objects.
I’ll cover both using
Set with object references (the default behavior) as well as with the contents of those objects (finding unique objects by value).
Set Checks Value Equality
“A value in the
Setmay only occur once; it is unique in the
Set's collection.” — MDN Docs
However, there are a few key differences with the implementation of equality comparison for
===, at least since ECMAScript 2015 (ES6).
NaN (not-a-number) differently than
===, in that
Set makes all
NaN values equal and will only store one in the
NaN === NaN is false and
NaN !== NaN is true.
Undefined values (
undefined) can also be stored in a
Set, and again only one
undefined value will be kept. That’s normal behavior for
Taken together, the behavior of
Set is a little bit closer to that of another ES6 feature
Object.is() compared to
Set for Unique Primitive Values in an Array
The equivalent to the
.push() method of arrays (
Array.prototype.push()) for a
Set is called
Set.prototype.add()). It works the same way — except that only one of each unique value will be added to the
That means you could loop through an array using
Array.prototype.forEach()) or a
for...of loop, then
.add() each item to a new
Set. The resulting
Set object will have only the unique values.
More simply, you can just pass the array to the
Set() constructor directly. That works because the
Set() constructor accepts an iterable object, like an array, as its sole parameter.
The constructor’s parameter is optional;
new Set() makes an empty
To convert a
Set back to an array, one method to do so is
Array.from(). I’ll talk about another method using the spread operator (
...) later, but the
Array.from() method works just as well and is easy-to-read.
Did you like the one-liner to find the unique items in an array using
Yeah, me too! 🤩 Thanks ES6.
Note that the order of the resulting
Set or array is the “insertion order” — the order that the values were found in the original array or list.
Unique Object References in an Array Using
However, when working with objects, any objects that contain the same data are considered to be different objects by
Set because they have different object references — the actual “pointers” in memory to those objects.
To put it another way, an array with just the number 1 in it will never equal another array, even if it also only contains 1:
 !==  // true
However, we can still use
Set to find unique object references in an array or other iterable object. That is super useful if the same object may have been added multiple times to an array, and we only want the unique objects.
For example, if you assign an object to a variable, and then add that variable to an array repeatedly, you could use
Set to remove the duplicates:
The usual methods of copying an object or array only make a shallow copy, so deeply-nested references are a problem…
Later in this article, I’ll talk about using
Set to compare objects by the values they contain instead of the object references pointing to them.
How to Make an Array From a
You can even write it as a one-liner:
You can also iterate through the
Set directly, as I discuss in the next section, because a
Set is also a type of iterable object, just like arrays themselves.
Iterating Through a
Set of Unique Values
There are a couple basic ways for iterating through a
1 — Use
These two methods are equivalent; both return a new
Iterator object including the values for each element in the
Set in insertion order.
2 — Use
Set.prototype.forEach() with a Callback Function
callbackFnonce for each value present in the
Setobject, in insertion order. If a
thisArgparameter is provided, it will be used as the
thisvalue for each invocation of
callbackFn.” — MDN Docs
Of course, you can use an arrow function as the callback function, the same as you would do when working with an array.
3 — Use a
for...of Loop Directly With the New
Technically, you don’t need to change the
Set back into an array at all, depending on what task you’re trying to solve.
If you just need to iterate through the list of unique items, then any of these three methods will let you do that, without making a new array in memory.
Here’s a code snippet showing how to use each of the three methods:
Typically, to iterate through a
Set object directly, I’ll choose the
for...of loop, but there’s nothing wrong with the other options.
Unique Object Keys (Properties) or Values with
To find a list of all the unique keys or unique values on an object, you can combine
Object.values(), respectively, with the
Set() constructor, as those methods each return an
That being said, you would probably only ever use
If you need to save the key associated with each value based on some certain criteria, you should be aware of the
Object.entries() method, which returns key-value pairs as an iterable that can be looped through with
That said, the only use for
Set when working with object properties or values is for finding the unique values contained within an object.
Object.values(), as shown above.
Using Set with an Array of Objects: Unique Values
If you have an array of objects instead and need to find the unique values of one object property across all of those objects, you can do it with
Here, you’ll need to use
Array.prototype.map()) to create a new array of only the values you want, and then you make a
Set of those.
To break it down, first you map the array of objects to a new array of just the values for your target property.
Then, you apply the
Set() constructor as usual to find the unique values:
The code above outputs the unique values for the “year” property among all the objects contained in the initial array.
Using Set with an Array of Objects: Unique Objects
If you need to find all of the unique objects in an array based on whether they share the exact same keys and values (their contents), you can use
Set checks for object references by default, so you will need to take a different approach in order to use
The above code loops through the entire array of objects, checking to see if the
Set already contains the “JSON stringified” version of the object. If it doesn’t, then the object is added to the
Set and the output array.
I then simplified my code by using
JSON.parse() to transform the strings back to objects. That in turn lends itself to a functional programming approach: using
Array.prototype.map()) instead of a
So, there’s a one-liner to find the unique objects in an array using
Just be warned that you may experience some problems using certain values like
Infinity that are not JSON-safe, as I discussed in my previous article about
JSON.stringify() and JSON.parse() are useful tools for handling JSON-formatted content
That said, for most types of data, JSON will work for comparing the objects using
Set, even for nested objects — just watch out for when it doesn’t.
Finding the Unique Dates in an Array Using Set
Let’s expand on our discussion of using
By default, the
Date will include an exact timestamp, because a
Date is a wrapper for the number of milliseconds since 1 January 1970 UTC. That means any two dates that are off by a millisecond are different.
Additionally, we can’t even use
Date objects are not JSON-safe.
Date objects get transformed to strings by
JSON.parse(), so you’d have to call the
Date() constructor on each one, perhaps by using
.map(dateString => new Date(dateString)). Putting that all together, we’d still be comparing milliseconds.
What if we just want to compare the year, month, and day? (The date?)
To find unique dates, you’d need to call
Date.prototype.toDateString()) instead of
.toDateString() method returns the date in a human-readable string, like
"Thu Jan 01 3001", making it perfect for the comparison we want.
The one-liner for comparing dates is different than the one to compare objects;
.map() needs to call
.toDateString() and then the
Date() constructor with
new instead of
The ES6 feature
Set has some built-in advantages over writing your own loop using the strict equality operator
NaN (not-a-number) will only show up once, and
-0 (negative zero) will be considered the same as
Set can be used to find unique object references, to find unique object values, or to find unique object values for a given property in an array of objects.
With some help from
Set can be used to find unique objects by their contents — as long as the data is JSON safe.
I also included examples of using
Date objects, where you might want to compare them by their
One more thing to mention here is
Happy coding! 👍😆💯