Jonas: So until ES2025,
sets only had the four methods that we just learned about,
has, add, delete, and clear,
so sets weren't really that useful.
And actually,
I never really used them personally for anything.
But now, that's changing because in ES2025,
sets got seven more methods,
which makes them a lot more useful,
especially when used together with a RACE.
Also,
these new methods bring sets more on par
with sets in other programming languages
where they're actually an important data structure,
so let's briefly now look at some
of these new methods in this lecture.
Now, for the demo in this video,
we're actually gonna use two data structures
that were present in your starter code,
so we can find them up here,
so these Italian foods and the Mexican foods.
So just go to your starter files and grab them from there.
And maybe if they were not there yet,
you can just download the starter files again,
or as an alternative,
you can also just copy these few lines here by hand.
So I'm just gonna grab them
and paste them here because these are the sets
on which we'll now experiment with these new methods,
so these new set operations.
So first off,
let's say that we have an application
that contains these foods,
so some Italian foods
and some Mexican foods.
And then in that application,
we needed to find out
which ingredients are present in both of the Italian
and the Mexican cuisine.
So just by looking at this here,
basically (laughing) by just reading the code,
we see that tomatoes, for example, is present here and here.
So both in Italy and in Mexico,
tomatoes are part of the common cuisine,
and the same is true, for example, here for garlic,
so this is how we could see it (laughing) basically.
But of course,
we want a programmatic way
of finding these common elements in two sets
or maybe in two arrays.
And so let's now use the first new method,
which is the intersection method.
So let's create a new variable here called common foods,
and then let's use the Italian foods.
And on this one, we call the intersection method.
And then in here, we pass the other set,
so that's Mexican foods in this case.
So basically, what this will do is to find again,
the intersection between this set and this set.
And we could also have specified them here
in the other order.
So we could've called Mexican foods intersection
and then pass in the Italian foods,
so the order here really doesn't matter.
So the result of the intersection method is a new set
which will contain only the elements
that are present in both of the sets.
So again, that's gonna be here tomatoes, garlic,
and maybe some other ones,
so let's see what we got.
So console.log, and then I will again log two things here.
So intersection, basically,
using this here as a label
so that later we know what is what actually in our output,
and then here are common foods,
and so beautiful.
Here is that set with the tomatoes and the garlic,
so exactly the two ingredients
that we had already identified.
Now, what if we wanted an array of this?
Well,
that's pretty easy as well
because we already learned about the spread operator.
So we can just create a brand new array like this,
and then we spread all of the elements
of the set like this into that new array,
and so then we get exactly that,
so an array of tomatoes and garlic.
So in fact,
this is extremely useful when working with arrays,
which is a way more common data structure than sets.
So many times, in our applications,
we are working with a arrays, not with sets.
But as you already know,
we can easily convert a arrays to sets and sets to a arrays.
So finding the elements that are common
in two arrays is actually a pretty common task.
And so before these new set operations
were added to the language,
we had to build our custom solutions
with something like a filter method
or something like that.
But now,
we can simply use the intersection method like this.
All we would have to do if we had some arrays
would be to convert them to a new set like we have here.
So this is actually exactly what I'm just talking about.
So these are a array,
and they have been converted to a set
just by calling new set like this.
So just as we learned also,
or as we did in the previous lecture down here, right,
so pretty useful.
And the same is true for our next method,
which is the union method.
So this one will give us all the elements
that are present in either of the sets, or in other words,
all the elements of both sets,
but without any duplicates, of course,
so let's create a new variable here,
Italian and Mexican, and let's call this one fusion.
Because (laughing) basically,
that's exactly what this one here does.
It will just, basically, combine everything into one set,
but again without any duplicates.
So here we can, again, do Italianfoods.union
and then pass in the Mexicanfoods,
but it could also be the other way around.
Just one thing that I didn't mention earlier
is that you need a pretty up-to-date browser
for this to work because these new methods here,
as I mentioned earlier, are part of ES2025.
So at the time I'm recording this,
only the latest versions of browsers
will actually support this method here, all right?
And so log this to the console as always.
This time,
we have a union and then ItalianMexicanfusion.
And indeed, now, we get everything here.
But of course,
tomatoes is only present once
and also garlic because remember how sets are unique,
so all the elements in there must be unique.
Now, in this case,
there would actually be another way of achieving this.
And maybe you want to try this as a challenge,
but (laughing) you also don't have to.
So if all we want to do is to combine two arrays
and then get their unique values,
which basically is what this is,
so that's what the union does, we can do it in another way.
We can just create a brand new array
and then spread both of these arrays in there,
so as we also already learned a bit earlier,
so the Italian foods
and then the Mexican foods also spread out like this.
And I will just log it to the console here
just to show you that this isn't perfect yet
because indeed now we have the duplicates.
So remember how tomatoes
and garlic are present in both the cuisines?
And so now it's here, and here,
and here is tomatoes and garlic again.
And so if we wanted to same result as before,
we would have to actually create a set out of this,
so a new set, and there we go.
So now, these are exactly the same as here.
And if we wanted an array out of this,
(laughing) so basically converting it back to an array,
we could just do what we did up here.
So basically,
creating a new array
and then spreading the result.
So this is starting to look a little bit confusing,
but it's gonna work just fine.
So now, it has 10 elements, this array here,
just like the set earlier.
And we could then create a nice function
for this if we needed to do this operation over
and over again instead of always
having to type this code, all right?
So this method is not the most useful one,
but the next one is, again, a bit more useful,
which is the difference method.
So the difference method gives us a new set
which will contain all the elements
that are present in the first set,
but not in the second one.
So basically,
this gives us all the elements
that are unique in the first set.
And so here, now,
the order in which we specify the sets here
and here will actually matter,
so let's do uniqueItalianfoods.
And so here,
Italianfoods.difference, and then the Mexicanfoods,
so console.log difference Italian,
and then here the uniqueItalianfoods.
And let's see,
that's the pasta, gnocchi, olive oil, and basil.
So it makes sense
that these are basically all the ingredients, all these six,
except for the ones that are common as we already saw,
so those are tomatoes and garlic.
And so therefore,
those are the ones that do not appear
in the Italian foods here after the difference operation.
So basically,
this removes the elements that are common
from this Italian foods set.
And by the way, if you know anything about mathematics,
all these operations also exist in mathematical sets.
So maybe you have already worked
with these maybe in high school or something like that.
And so then maybe all this
is already a bit more familiar to you.
So in any case, we can now do the same,
but with the Mexican foods because this time,
this will give us a different result.
So as I mentioned earlier,
now the order in which we use
the sets here actually matters,
so uniqueMexicanfoods.
We can do Mexicanfoods.difference,
and then the Italianfoods.
And as you can imagine,
this will then once again give us
all of the Mexican foods or ingredients,
except for tomato and garlic,
so difference Mexican, uniqueMexicanfoods.
And indeed, here are the other four,
which are not tomato and garlic.
So as I just mentioned a minute before,
all of these operations are actually mathematical operations
that exist in sets in mathematics,
so we can also see this in some nice Venn diagrams.
And so let's actually search
for this here in the documentation.
So MDN sets,
and then let's say the difference we just worked with,
and so this is the one here,
and so here we have this diagram.
So imagine that these are all the Mexican foods
and this one are all the Italian foods.
These ones are the ones that are common,
so this is the intersection.
And so that means that tomatoes and garlic are right here.
Then we have the union,
which is all of this together, everything here.
And then we have the difference,
which in this case is only this,
so all the foods that are only in the Mexican
but not in the Italian, so just like this, all right?
And now, next up, we have a pretty similar method,
which is called the symmetric difference.
And this one will give us all the elements
that are present in either set, but not in both.
So basically,
this is the opposite of the intersection method.
And if we think back to that Venn diagram
that unfortunately I just closed,
this will basically give us the part
that is in the left circle plus the one
that's in the right circle,
but not intersecting,
so it will give us the unique Italian foods
plus the unique Mexican foods.
So this is all starting to sound
a bit abstract here, I guess,
but there really is a use case in some situations
and in some applications for these operations,
and that's why they were added to the language.
So just to show you,
let's call this one uniqueItalianandMexicanfoods.
And then here, once again, the order doesn't really matter,
so we can just say Italianfoods.symmetric difference.
And these methods are so new
that they are not even in the autocomplete in VS Code yet,
but we can just type it out by hand.
And so now, log this one as well,
so it's this huge one here.
And so this should give us exactly these eight,
so these fours right here plus these four of Mexico.
Now there are three more methods,
but I'm not gonna go really deep into these.
So the three methods that we still have to look at
are some methods that can be used to check
whether one of the sets contains the other set.
So these are called is subset of,
is super set of, and is disjoint from.
Now,
there is no need to waste too much time
on of these methods here.
And so let's just use one of them,
which we can use to check whether one set
is completely different from another set.
so this one is called the is disjoint from.
So let's just do console.log without creating any variable,
so Italian foods.isDisjointfrom,
and then Mexicanfoods.
So again,
this will check whether these sets are completely different,
or in other words,
if one set does not contain any elements of the other set.
And so in this case, they would be disjointed.
Now, in this case,
we already know that they have some elements in common.
And so therefore, we get false right here.
but this is another nice method
that we could nicely use with some arrays,
and then in conjunction with, for example,
an if statement, or a ternary,
or some situation where we need a Boolean value.
And if you want,
you can always go check out
the documentation for is subset of
or is superset off,
which also will give us some Boolean value.
But for now,
let's wrap it up here
and move on to our next data structure,
which are maps.