Original subtitles

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.