The Set Data Structure
The Set is a specialized data structure in JavaScript that was added as part of ES2015.
A Set is a collection of ordered values, kind of like an array.
The main differentiator is that values have to be unique.
Creating a Set
Instead of using curly braces like an object or square brackets like an array, you create a set using the new Set() syntax.
const users = new Set();
Adding Values to a Set
In order to add a value to a set, we use a method called add.
For example, if you want to add a new user with the username John23, you would do the following:
users.add("john23");
Now, if you inspect the users set, you'll see that it has John23 in it:
users; // Set(1) {"john23"}
Every value in a set is ordered by insertion order. So, if you add another user with the username sasha99, the set will now have two elements, ordered by insertion order:
users.add("sasha99");// Set(2) {"john23", "sasha99"}
Sets Are Unique
The main feature of sets is that they only allow unique elements. So, if you try to reinsert a value that is already in the set, the set will remain unchanged.
For example, if you try to add john23 again, the set will still only have two values inside of it (john23 and sasha99).
users.add("john23");// Set(2) {"john23", "sasha99"}
Sets only allowing unique elements is a big part of what makes them useful when compared with an array.
There are many situations where you need values to be unique and don't want duplicates.
You could accomplish this functionality using an array, but it's harder and less performant because JavaScript would have to check every element in the array to see if "John23" is present.
Checking for Values in a Set
When using a set, checking for duplicated values and the presence of a value is designed to be fast and efficient behind the scenes. Sets will operate in constant time compared to O(N) time when working with arrays.
To check if a value is present in a set, you use the has method.
For example, let's check to see if john22 is present in our set:
users.has("john22"); // falseusers.has("john23"); // true
Remember, this is a constant time search operation, which means it's very fast.
Iterating Over a Set
You can iterate over a set using the forEach method on set objects:
users.forEach((user) => { console.log(user);});
Clearing a Set
To empty a set, you can use the clear method:
users.clear(); // Now users is an empty set
Set Size Property
Sets have a size property (instead of length) that returns the number of elements in the set:
users.add("sasha99");users.size; // Returns 1
Using Sets to Remove Duplicate Values from an Array
One common use case for sets is when you have an array full of duplicate data and you want to get just the unique values.
For example, suppose we have an array with duplicated numbers:
let duplicates = [2, 2, 3, 3, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9];
To remove duplicates, you can turn this array into a new set:
let uniqueValues = new Set(duplicates);
Now, uniqueValues is a set with a size of 8, containing the unique elements 2, 3, 4, 5, 6, 7, 8, and 9.
Then you can turn the set back into an array using the spread operator:
let uniqueArray = [...new Set(duplicates)];
Sets for Managing Unique Data
Another use case for sets is managing unique data like user permissions. Since user permissions are unique, it's often easier and more performant to work with sets compared to arrays.
const userPermissions = new Set(["create", "read", "edit", "delete"]);
For example, you can quickly add a new permission to a user, check for the presence of a permission, or revoke a permission using methods like add, has, and delete.
userPermissions.add("newPermission");userPermissions.has("delete");userPermissions.delete("edit");
Wrapping Up
Sets offer significant performance improvements over arrays when it comes to storing and searching for unique values. The speed improvement is especially noticeable when working with large sets.
They provide a faster and slightly better interface when working with unique data like user permissions.
So, next time you need to work with unique values, consider using sets for a more efficient and faster solution!
Transcript
00:00 The set is a specialized data structure in JavaScript that was added as part of ES2015. And unlike other data structures like the array or an object literal where we have a nice shortcut syntax, we can use curly braces for an object, we can use square brackets for an array,
00:16 with a set the only way to make a new set is to call new set just like this. I'll save this to a variable and I'll call this one users. Okay, so that's how you make a set. But before we do anything else, let's talk about the purpose of a set. A set is a collection of values, kind of like an array.
00:35 It's ordered, but the main constraint, the differentiator, is that values have to be unique in a set. So let me show you that in action. In order to add a value to a set, we use a method called add. Now my set is called users. Maybe I'm making an online game where I have to have a bunch of users playing at the same time,
00:53 but I can't have users that have the same username. So if somebody logs in, they're called, I don't know, John23. When I call add, you can see that my user set, if I inspect it here, now has John23 in the set.
01:09 And every value in here, the whole set, is ordered by insertion order. Somebody else joins my online game, Sasha99, welcome to our game. We'll insert that username into the set and now we have two elements. Again, ordered by insertion order. But remember that sets are unique.
01:25 So if I try and reinsert, how about John23? Somebody tries to join with the same username. If we look at our set, it's completely unchanged. It still only has two values inside of it. John23 appears once, followed by Sasha99.
01:40 Sets only allow unique elements, and that's what makes them useful. Otherwise, if you just need a list of elements, you can use an array. But if you want a unique list of elements, that's where sets come in. So to make a new set, we call new set. And we've seen a single method called add, which inserts a new value into the set,
01:58 assuming the value is not already present in the set. There are other methods we'll talk about in a moment. But first, let's talk about the utility here. There are lots of situations where you need something to be unique. You need values to be unique. You don't want duplicates. And you could accomplish this functionality using an array. It's just a little bit harder.
02:17 It's harder as far as the work we have to do, but it's also less performant. For example, if I had John23 in an array, and then I have Sasha99 in the array, and then I want to add John23 into this array only if it doesn't already exist in the array,
02:36 how would I go about doing that? It's a little bit more complicated. I have to first check, is John23 in this array? If it is, then don't insert him, or it. If it's not, then insert John23. But beyond that, it's actually not very performant to do so.
02:52 Basically, JavaScript will have to check every element in the array to see if John23 is present. But when we use a set, it's much more performant. When checking for duplicated values, we're checking for the presence of a value, it's designed to be fast and efficient behind the scenes.
03:08 Sets will operate in constant time compared to O of N time when we're talking about arrays. There are a handful of other set methods, including clear, which will empty the whole thing out, delete, which will delete a specific value, and then we also have has. And has is basically a search. It will check to see if a value is present.
03:27 So let's check to see if John22 is present in our set. It is not. Is John23 present? It is. And remember, this is a constant time search operation. If you don't know about big O notation, it just means that it's fast. It's very quick. I won't demonstrate this, but you can iterate over a set.
03:44 There's a for each method on set objects. And then I also mentioned there's a clear method, which just empties the entire set out. And now users is an empty set. Okay. Also, sets have a size property. It's not a length, but it's called size. So let's add somebody back in.
04:02 If we look at our users.size, it returns one because there's one element in the set. Let's wrap up with some examples of where you could use sets. One of the simplest and most common use cases is when you actually have an array full of duplicate data. Suppose I have this array full of duplicated numbers.
04:20 As you can see, there's a couple of twos, multiple threes, and so on. And I want to get it down to just the unique values, which is a pretty common thing to do when you're writing code, depending on the situation. The easiest way to do this is to turn this into a new set. When I create a new set, I can pass through an array.
04:37 I'll pass through my duplicates array, and you'll see that this makes me a set with a size of eight. It has eight unique elements, two, three, four, five, six, seven, eight, and nine. For whatever reason, I decided to skip one.
04:51 And then I can turn it back to an array if that's what I want by using the spread operator to spread my new set back into a new array. But it only contains the unique values from this duplicates array. So that's one use case. We're not actually doing much for the set. We're just creating a new one and then turning it back into an array.
05:09 Another simple use case for sets is anytime you have unique data, it's often easier to work with sets, not to mention more performance compared to arrays. So an example would be user permissions. If you're trying to manage the permissions for a given user, those are going to be unique, right? Somebody can't have to create permission or the delete permission twice.
05:28 But you want to quickly be able to add a new permission to a user, you know, user permissions or check to see for the presence. Can this user delete? If you use the has method that we already learned, it makes it very easy. And then we can also revoke that permission by using deletes.
05:46 And let's remove the edit permission. Anyway, very simple stuff. You know, nothing revolutionary. Like I said, you can do this with an array, but it's just faster and a slightly better interface when you're doing it with a set. Of course, it only works with unique values.
06:01 And then as far as performance is concerned, you really won't notice a difference on small sets like you see here or small arrays. But behind the scenes, sets are much more optimized and much faster to store unique values and search for unique values than arrays.