Jonas: In the past,
JavaScript has always had very little
built-in data structures.
So basically, we only had objects and arrays.
But in ESX, two more data structures
were finally introduced.
And that are. sets and maps.
So these are pretty common data structures
that already exists in other programming languages,
and now, they also exist in JavaScript.
So in this lecture, let's learn all about sets.
And a set is basically just a collection
of unique values.
So that means that a set can never have any duplicates.
And that property makes them useful
in certain situations.
So let's create a new set here.
Let's call it ordersSet.
Okay. So again, to create a new set,
we write new set
and then here, we need to pass in an iterable.
And the most common iterable here is an array.
So let's create an array
with a couple of strings now.
Let's say pasta, pizza,
then pizza again,
then risotto. Let's put another pasta,
and another pizza.
Okay. So six strings.
But of course, they could be different data types in here.
So set can of course hold mixed data types.
That's not a problem at all.
Now, here we clearly see some duplicate strings.
So what do you think
that this set will look like?
And now that we created it,
and when we log it to the console?
Well, we get a set.
Here, we can see it has a size of three.
And the only values that are in there
are pasta, pizza and risotto.
So, that's right. All the duplicates are actually gone.
Now, also we can see that a set
kind of looks similar to an array, right.
So there are no key value pairs,
it's just a bunch of values grouped together,
in this case into a set.
And just like arrays, sets are also iterables.
Okay. Now, of course a set
is still very different from an array.
So first, because its elements are unique.
And second, because the order
of elements in the set is irrelevant.
And we will see why in a second.
But anyway, keep in mind that strings
are also iterables.
So we can do this.
So we can pass in a string.
And so now we get a set
with these five elements.
So, and that's the five components basically
of this iterable, which is the string.
And of course, the set could also be empty,
just like this.
All right. And now let's learn how
to actually work with sets.
So first off, we can get the size of a set.
So orderSet.size.
And so that is three.
And so in this particular example,
this might be useful for the chef of our kitchen
to know how many different meals
are going to be cooked here.
Right. So if this array here is an array
of all the orders,
then the set of these orders
are simply the unique different meals
that are gonna be cooked.
And then the size
is how many different meals will be cooked?
And just note, how it is actually called size
and to not length
like it is in arrays.
So don't make that confusion.
Next, we can check if a certain element is in a set.
So orderset.has.
And so this is actually a method.
And so let's check if pizza is in there.
And let's check if bread is in there.
So true and false.
And that's exactly as we expect it.
And so, comparing again two arrays,
this has method is similar
to the includes method in arrays.
Right. Next step,
we can also add new elements to a set.
So orderSet.
So let's say that now someone ordered garlic bread.
And let's say that is actually happened twice.
So, what do you think
that the set will look like now?
So orderSet.
And so the garlic bread got added.
But only, of course, one of them,
because again, the set has to be unique.
And so the second one was basically ignored.
Finally, we can also delete elements.
So let's do that before the log.
So orderSet.delete.
So all of these method names
are very straightforward.
And that's because this is such a modern feature.
So the modern stuff really has
this more straightforward names,
and a different way of working
with the data structures.
So we have risotto here.
And so now here we are deleting it.
And so Indeed, it is now gone
from the set.
So really, really easy.
And in arrays, there is actually no method
that is this simple.
We will see how to delete elements
from arrays later.
But I can tell you that it's a little bit more complex.
Okay, and that's actually it.
But now you might ask,
how do we actually retrieve values out of a set?
Can we maybe use an index,
like in a race?
So doing something like, maybe like this here?
And the answer, as we will see is no.
So this doesn't work,
it gives us undefined,
no matter what number we put here.
All right. And that is
because in sets there are actually no indexes.
And in fact, there is no way
of getting values out of a set.
And if we think about this,
then it makes sense.
So there's really no need for getting data out
of a set. That's because if all values are unique,
and if their order does not matter,
then there is no point
of retrieving values out of a set.
All we need to know
is whether a certain value
is in the set or not.
And that's why we have the has method.
If your goal is to actually store values in order
and then retrieve it,
then the best use case, is to just use an array.
You wouldn't use a set for that.
And so again, there's no need
for getting values out of a set,
because if you need it, then you will just use an array.
Finally, there is actually one more method here
but it's not that important.
All we can use it for is
to basically delete all of the elements
of the set.
And so we see that now it is empty, right.
But let's put that back,
so that we can work some more with a set.
So as I said, in the beginning,
sets are also iterables.
And therefore, we can loop over them.
So let's say, order
from ordersSet
and not from...
It is off, obviously.
And then we can just lock the order.
And indeed, here they are.
So looping is possible,
just like in any other iterable.
All right, so now that we know how to work with sets,
let's see a big use case for them right now.
So in a normal code base,
the main use case of sets is actually
to remove duplicate values of arrays.
So let's just write that here.
Example. So let's say that we have an array
in our restaurant,
which contains the staff of our restaurant.
Let's say, we have one person
that is the waiter,
one person, that is the chef,
another person, that is a waiter,
then we have also a manager,
then we have another person
that is a chef also,
and another waiter.
So that's an array
of all our staff in the restaurant.
But now let's say that for some reason,
we are interested in knowing only
which different positions there are in our restaurant.
Or in other words,
we would basically like
to have a unique array of this, right?
So this array without all the duplicates
that will solve the problem.
So let's create a set for that.
Easy enough, right?
So staff, unique,
equals, new, set,
and then the iterable
that we need to pass in, here's the staff
because an array is already an iterable.
Now, this is not yet the end of the solution,
but let's take a look at it for now.
And, of course, it needs to be staff, unique.
And so, yes. So we have a set now
with waiter, chef and manager.
So the three unique positions.
But now we actually want this
to be an array.
But the conversion from a set
to an array is pretty easy,
because they're both iterables.
So remember from earlier
that the spread operator works
on all iterables. Right?
So that includes sets.
And so we can now create an array around this basically.
And then we can unpack
this entire set here
using the spread operator,
and then these elements will be put
into the newly constructed array. Okay.
And so Indeed, we now end up
with a new array. Okay.
So the spread operator here works just like
on an array. It works really exactly the same.
So it takes all the elements out of the iterable
and essentially writes them here,
like comma separated, right.
Now, if we only wanted to know
how many different positions there are,
then the size property
is very useful.
So all you would have to do,
even though this looks a little bit weird,
would be to say,
new set, then with the array,
and then .size.
And that's it.
And then we wouldn't even need
to have to create the array at all.
So if we didn't need the unique array.
So if all we had was this,
and we wanted to know how many unique positions there are,
then this year would be the way to go.
And the same could even be done with counting,
how many different letters there are in a string, right.
Because an iterable,
or actually a string is also an iterable.
So let's see how many different letters there
are in my name.
And it looks like there are 11.
All right. So as a conclusion
to this video sets are not intended
to replace arrays at all.
So whenever you need to store values in order,
and that might contain duplicates,
always just use arrays.
That's also true when you need
to really manipulate data,
because arrays have access to a lot
of great array methods
that we're going to study a little bit later.
Now sets have this very useful property
of being unique.
And it's also very easy to interact
with sets by using all
of their straightforward methods.
However, they are not nearly as important as arrays.
So keep sets in mind when you need to work
with unique values.
But besides that, you can just continue using arrays.