All language subtitles for 116 Maps_ Fundamentals.en_US

So we learnt 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.

No, 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 erase 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 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. Okay.

So you'll 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 actually calling the set method like this,

does return the new set.

So let me show that to you here, okay.

So this is what the set looks like,

after adding this key number two.

So here we have the entries, the first is name,

which has then mapped to classical Italiano

and then the other two that we just added.

Now the fact that the set method, returns the new set ,

allows us to chain 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.

Okay. So I can now say open and set it to 11,

and then again,

I can chain the next one and say close at 23.

So let's save it,

and this will unformat this nicely.

And so again calling the set method will return the new set.

And so all of this here is now the new set.

And so then on that set, we can call set again.

All right.

And we can continue this even further.

So let's not actually even use Booleans as the key here.

And we can say that, we want to map true to we are open.

Okay. 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 lo this to the console actually

and let's just duplicate it here and also log true,

and you'll 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 that the number as the key.

And so with this,

we will then yet 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'll 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

true current time from JavaScript,

but we don't know how yet.

So let's just say it's 21 hours.

So that's a 9:00 PM.

And then, we could do something really clever like this.

So rest dot 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 dot get open,

and at the same time, is it below rest dot 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 results

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? Let's log

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 dot delete.

And let's say that the second location should be close now.

So this one here, the one in Lisbon.

And so we take 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 a delete operator,

but that's a really slow process.

And usually it's not encouraged to do that.

I hear about the has method,

actually objects do also have a method,

which is called has owned property.

But we're gonna talk

about that in the object oriented programming section.

All right, next maps also have to size property.

So rest dot 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 year six.

And now just to finish,

let me show you that we can in fact, use arrays

or objects as map keys, so let's see, or 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 dot 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 learnt,

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 dot set,

and now as a key, we will use document dot query selector,

and then we're gonna select this H one elements,

that we have here.

So this is just an H one.

So nothing fancy,

and so the result of this will be an object.

And so let's say that this is the heading.

And now as we check it out here, you will see that is 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.

Alright. 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.