Instructor: So, we learned about sets.
Now, it's time to learn
about the other new JavaScript data structure
and that is maps.
And, let me start by telling you
that maps are a lot more useful than sets.
So what exactly is a map?
Well, it's certainly not the same thing
that we use in the real life
to find our ways around.
Now, instead in JavaScript,
a map is a data structure
that we can use to map values to keys.
So, just like an object
data is stored in key value pairs in maps.
Now, the big difference between objects and maps
is that in maps, the keys can have any type
and this can be huge.
So, in objects, the keys are basically always strings.
But in maps, we can have any type of key.
It could even be objects, or arrays, or other maps.
So, that can lead to some really great and advanced stuff.
So, let's create a restaurant map here.
So, I'm just calling it rest here.
And so, we again use the constructor
just like we used for the set,
but this one called map.
And the easiest way to create a map
is to actually create an empty map
just like this
without passing anything in.
And then, to fill up the map
we can use the set method.
And then here, we pass into arguments.
The first is the key name.
So, let's call it name.
And then, the name of the restaurant itself.
So, Classico Italiano.
And, so you see, that this set method is pretty similar
to the add method that we had in sets.
So, both allow us to add a new element
to the data structure.
And, remember that we can use any data type that we want.
So, let's say that the restaurant has two locations.
So, we can create a key with a number.
It doesn't have to be a string.
So, let's say one is in Firenze, Italy.
And the other one,
so, a number two
is in Lisbon, Portugal.
And, calling the set method like this
does not only update the map that it's called on,
but it also returns the map.
So, let me show that to you here.
Okay, so this is what the set looks like
after adding this key number two.
(mouse clicking)
So, here we have the entries.
The first is name
which is then mapped to Classico Italiano.
And then, the other two that we just added.
Now, the fact that the set method
actually returns the updated map
allows us to change the set method like this.
So, let's set categories here
as an array and I will just grab that from up here.
Okay, so once more,
the value can be anything.
And now, I can just chain the next set on here.
(mouse clicking)
So, I can now say open and set it to 11.
And then again, I can change the next one
and say close at 23.
So, let's save it.
And this will then format this nicely.
So, again, calling the set method
returns the updated map.
And so, all of this is now the updated map.
And so, we can call set again on that map.
And, we can continue this even further.
So, that's not actually
even use booleans as the key here.
And, we can say that we want to map True
to We are open.
(mouse clicking)
And then, we can also set False
to We are closed.
And, we will see in a minute
how this can become useful, okay?
Now, in order to read data from a map
we use the Get method.
And so, that get method is available on all the maps.
And so, all we need to do is to pass in the name of the key.
So, let's see.
Let's log this to the console actually.
And, let's just duplicate it here and also log True.
And, you see, that the True key here is then mapped
to We are open
and named to Classico Italiano of course.
And here, when we get the elements
of course the data type of the key matters.
So, if we try it through the string
then that would be undefined.
And, if we tried to retrieve one, as a string,
that would also be undefined.
Because, here we have one, the number, as the key.
And so, with this we will then get Firenze, Italy.
All right.
Now, just for fun
let's use the fact
that we can have Boolean keys.
So, this True and False here, right?
And, we also have the open and the close time.
So, you see they are all kind of related.
And so, let's create something fun with this.
So, let's say we have some current time.
And, we could actually get to current time from JavaScript
but we don't know how yet.
So, let's just say it's 21 hours.
So, that's 9:00 PM.
And then, we could do something really clever like this.
So, rest.get
and so, when we pass in True,
then we will get, We are open.
And, when we pass in False,
we will get, We are closed.
And so, in order to get the correct string here
according to the time,
all we need to do is to compare the current time
with these two Open and Close, okay?
So, let's do that.
We can say,
or we can ask,
is the time,
so, the current time greater
than rest.get, open.
And, at the same time,
is it below rest.get, close.
So basically, here we are asking
if the current time is between 23 and 11.
And so, this here is a True False value.
And, this is a True False value so, Boolean.
And so, the result of this end operation
will be either True or False.
And then, True or False will map
to one of these values.
So, that's really clever, right?
So, let's unlog the results to the console.
And, let's check it out.
And so, at 21 hours, We are open.
And, that makes sense.
It is between these two times.
But, if it was like eight hours,
then we are closed, amazing.
Now, this is as I said pretty clever,
but it's not really so readable.
So, don't overuse this kind of pattern, okay?
This just really goes to show the power
of having Booleans as map keys.
But anyway, let's now keep exploring the methods
that are available on maps.
So, we already have methods to set and to get.
Now, we can also check if a map contains a certain key.
So, let's log to the console
the result of calling the has method.
So, categories, and so, this should be True.
And, it is indeed True.
Then, we can also delete elements from the map.
And again, that happens based on the key.
So, rest.delete.
And, let's say that the second location
should be closed now.
So, this one here, the one in Lisbon.
And so, we take that key and delete it from the map.
And as a result, that will then be gone here.
So, you see, no longer there.
Now comparing this to objects,
we can actually also delete properties from objects
using something called the Delete Operator.
But, that's a really slow process.
And usually, it's not encouraged to do that here.
About the has method.
Actually, objects do also have a method
which is called hasOwnProperty.
But, we're gonna talk about that
in the object oriented programming section, all right?
Next, maps also have the size property.
So, rest.size, of course.
And, that should be seven as we can see here.
And yeah, so it has seven items.
And then, to finish, we can also clear.
So basically, remove all the elements from the map.
Let's just put that here.
And so, now it's gone and it has a size of zero.
Let's put that back.
So, as you can see here,
there is some overlap in the way that we work
with maps and sets.
And, that's because they were both introduced in ES6.
And now just to finish,
let me show you that we can in fact use arrays
or objects as map keys.
So, let's here set something else.
And so, now as a key
I will use this array
and I will set it to Test, okay?
And, let's just put that actually here.
So, it's before the log
so we can take a look at it.
And so, here indeed we see
this is now the key.
This array, all right?
But now, to get the data based on that array
let me see how we could do that.
So, rest.get.
And, think about what we are doing here.
Do you think that this will work?
And actually, we need to log it to console.
But, given what we learned
in the previous section
about how JavaScript works behind the scenes.
Especially, primitives versus objects.
Do you think that this will now retrieve Test?
Well, let's see.
And, no it did not.
And the reason for that,
is that these two arrays
are actually not the same object.
So, this array, and this one,
even though we wrote them in the same way
and so, they have the same elements,
they are not the same object in the heap, okay?
And, the key here is exactly this object.
This object in memory,
and not this one.
And so, this cannot work.
In order to make it work
we would have to do this.
Creating an array, one, two.
And then, we use that array.
And then, we also use the same array
to read the value out of the map.
And so now, it is gonna work, okay?
Because, now of course
these two refer to the same place in memory.
Great, and so with this we proved
that we can indeed use objects as map keys.
And, this can be very useful with dumb elements
which, in fact are also nothing more than just
a special type of object.
Let's do that here as well.
Let's do rest.set.
And now as a key,
we will use document.queryselector.
And then, we're gonna select
these h1 elements that we have here.
So, this is just an h1.
So, nothing fancy.
And so, the result of this will be an object.
And so, let's say that this is the heading.
That now as we check it out here,
you will see that it's here indeed.
So, as I hover it
you can even see it here visible on the webpage.
You see that?
The highlight up there?
That exactly is the key of this map entry.
Sounds crazy, but it is possible
and it can enable some advanced functionality.
All right.
So, we learned here how to create maps
and, how to work with them.
So, this should be enough for one lecture.
And so, let's wrap up this one now.
And, continue learning about maps
in the next one.