Original subtitles

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.