Set
is one of my favorite built-in object types in JavaScript. Today I'll introduce the Set
object and discuss some of its use cases.
The Set Object
The Set
object is an object in which you can store unique primitive values or object references. Uniqueness is key here--no primitive value or object reference can be added multiple times.
How to Use Set
To use set, you create a new instance of it.
const mySet = new Set();
We now have an empty set. We can add the number 1
to this set by using the add
method.
mySet.add(1);
How do we know that we've added 1
? We can use the has
method to check.
console.log(mySet.has(1));
// true
Let's add an object reference now and then check that we have that object in our Set
.
const obj = { name: 'Daffodil' };
mySet.add(obj);
console.log(mySet.has(obj));
// true
Remember that object references are compared, not the object keys themselves. In other words:
console.log(mySet.has({ name: 'Daffodil' }));
// false
We can see how many elements are in the Set
by using the size
property.
console.log(mySet.size);
// 2
Next up, let's remove a value using the delete
method.
mySet.delete(1);
console.log(mySet.has(1));
// false
Finally, we'll clear out the Set
using the clear
method.
mySet.clear();
console.log(mySet.size);
// 0
Iterating Over a Set
The easiest way to iterate over a Set
is to use the forEach
method.
new Set([1, 2, 3]).forEach(el => {
console.log(el * 2);
});
// 2 4 6
Set
objects also have entries
, keys
, and values
methods, which each returns Iterators. Those are a bit outside the scope of this tutorial!
Using Sets in the Wild
I find the Set
object to be really great for keeping track of a binary state associated with an object. A great example is an accordion menu: each item in the menu will either be open or closed. We can create a Set
called isOpen
that tracks the open status of an accordion item and a toggle
function that toggles the open status:
const isOpen = new Set();
function toggle(menuItem) {
if (isOpen.has(menuItem)) {
isOpen.delete(menuItem);
} else {
isOpen.add(menuItem);
}
}
A Note of Efficiency
You might be thinking that the Set
object seems awfully similar to arrays. There is, however, a big difference that may have performance ramifications in your application. The Set
object is required to be implemented using hash tables (or methods with hash table-like efficiency) [1].
When you store something in an array, you might have to traverse the entire array to find the item. With a Set
, however, the lookup is instantaneous. Practically speaking, the performance will be negligable for most cases, but good to remember if you find yourself having to track large numbers of items!
Conclusion
I hope this helped you understand the Set
object and you now have a new tool in your JavaScript toolbelt!
References
Top comments (7)
I actually run some benchmarks, and the results were fascinating. Here is the scenario: I've created an array and a set with full of True values and with only one False at the end.
By the way, if you increase the number of values in an array it will take even longer because it has O(n) complexity. In essence, it looks up every item in the array one by one. Whereas set has O(1) complexity meaning it takes the same amount of time even though the number grows.
Not a fair comparison on several dimensions.
Set
should have only unique values. If you modifypopulateArray
to only store unique elements - that would be an improvement.Set
should typically be compared toObject
Yes, you are right. But, even if we've stored unique values inside populateArray such as alphabet(a-z) it would still have taken more time than
Set
. Because it still has to iterate it over with O(n) complexity. What I was trying to show is a mere demonstration of execution of speedThis is awesome, thank you! This should probably be its own post
is there a difference if you use Array.includes?
Computing the difference or intersection between sets can also be helpful. I used this the other day to determine what remaining items I had to find in a computation.
Compliments of MDN.
Thanks for the note about Sets using hash table lookups and the link to the spec. Didn't know that about
Set
.