
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.
What is the Set Object?
The Set
object is a collection of values 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.
“That’s great,” you say, “but how can I use it?” Well, I’m glad you asked!
To use a set, you have to, as you might imagine, create a new instance of it.
const mySet = new Set();
So now we have an empty set. We can do fun stuff like add the number 1 to this set by using the add
method.
myset.add(1);
“Do you have any proof that it added it,” you ask? You’re not very trusting, so here, I’ll show you. We use the has
method to check if 1
is really in the set.
console.log(mySet.has(1));
// true
Ok, so now you have some proof that this really worked. Let’s get a little crazier and add an object reference now. Then, we will check that we have that object in our Set
.
const obj = { name: 'Daffodil' };
mySet.add(obj);
console.log(mySet.has(obj));
// true
Pretty simple, right? One thing to remember, is that object references are compared, not the object keys themselves. For example:
console.log(mySet.has({ name: 'Daffodil' }));
// false
We can see that many elements are in the Set
just by using the size
property.
console.log(mySet.size);
// 2
Now, let’s try deleting a value from the Set
by using the delete
method.
mySet.delete(1);
console.log(mySet.has(1));
// false
Ok, one more thing, let’s empty the Set
by using the clear
method.
mySet.clear();
console.log(mySet.size);
// 0
Let’s try iterating over a Set
There is a super easy way to iterate over a Set
and that’s by using the forEach
method.
new Set([1, 2, 3]).forEach(el => {
console.log(el * 2);
});
// 2 4 6
To review, Set
objects have entries
, keys
, and values
methods. Each of those returns Iterators. Take a look at the excellent MDN resource for more information about Iterators
.
How do I use these in the real world?
The Set
object is an excellent resource for keeping track of a binary state associated with an object. For example, an accordion menu. As you are aware, each menu item will have a state of either open or closed. We would create an object (or Set
) that would keep track of the open status of each accordion item and a toggle
function that switches the open status.
const isOpen = new Set();
function toggle(menuItem) {
if (isOpen.has(menuItem)) {
isOpen.delete(menuItem);
} else {
isOpen.add(menuItem);
}
}
Just how efficient is this Set object anyway?
You might be thinking that the Set
object seems awfully similar to arrays. There is a big difference, however, that may have serious performance ramifications in your application. The Set
object is required to be implemented using hash tables (or methods with hash table-like efficiency).
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 negligible for most cases, but good to remember if you find yourself having to track large numbers of items!