Preview
Video Player
00:00
00:00
Map
6:43In this video we’ll look at the new Map object.
Map is a special kind of object.
0:00
If you've ever created a hash table,
you'll likely find maps intuitive to use.
0:02
So let's take a look at some examples.
0:06
And to follow along using
the latest workspace, go ahead and
0:08
launch the workspace for this video.
0:10
In the file classroom-map.js,
I have a classroom, which is a Map object.
0:12
And like in the previous video, I'm
going to add students to the classroom.
0:18
So I'll create my students by pasting
in the student objects we used in
0:22
the previous video.
0:25
And you can also copy these from
the teacher's notes of this video.
0:26
So again, we have StevenJ,
Sarah, and StevenS.
0:29
So now, to add the three students to
the classroom, I'll use the set method.
0:34
Set takes two arguments,
a key and a value.
0:39
The first for StevenJ.
0:42
I'll write classroom.set.
0:43
And as the key,
I'll pass the string stevenJ.
0:48
And for the value, I'll write stevenJ.
0:54
So now, for Sarah,
we'll say classroom.set sarah, then sarah.
0:58
And we'll do the same for StevenS.
1:07
So we'll say classroom.set stevenS,
then stevenS.
1:09
And now, to see the total number
of values in the classroom,
1:12
we'll log out the size property.
1:17
So like in the previous video,
I'll type console.log.
1:20
I'll log the string classroom size.
1:24
Then classroom.size.
1:32
And next, I might want to check
the classroom to see if a key exists.
1:36
When working with objects in JavaScript,
1:41
we've generally relied on
hasOwnProperty to do this.
1:44
Well, with Map, we can also use the has
method you learned about in the previous
1:47
video to indicate whether an element
with the specified key exists or not.
1:52
So first I'll say,
1:57
if classroom.has stevenJ console.log,
2:00
stevenJ is in the classroom.
2:08
And for Sarah, we'll do the same.
2:21
We'll say if classroom.has sarah
console.log, sarah is in the classroom.
2:23
And finally, we'll say,
2:31
if classroom.has stephenS console.log
stevenS is in the classroom.
2:33
So now let's run this file to see
what gets logged to the console.
2:40
Okay, so great, I have a classroom
size of 3 with stevenJ, sarah, and
2:47
stevenS in the classroom, perfect.
2:52
And now we can retrieve the value of
a given key by using the get method and
2:57
supplying a key.
3:02
So, right below the if statements,
3:04
to get the properties and values of sarah,
3:09
I'll write console.log sarah,
3:14
then we'll say classroom.get
the string sarah.
3:18
So now when I run this file in
the console, it returns the name and
3:26
age values for Sarah.
3:30
So now let's use the delete method
to remove Sarah from the map.
3:38
I'll delete Sarah right
before the console.log with
3:42
the get method to see what happens.
3:47
I'll type classroom.delete sarah.
3:50
So now I'll run the file in the console.
3:57
And as you can see, I've successfully
removed the key-value pair for Sarah.
4:01
It now returns as undefined.
4:06
When working with either a set or a map,
4:12
you may need to empty the object without
destroying the object in memory.
4:14
To do this, you use the clear method.
4:19
So I'll add classroom.clear right after
the console.log for classroom size.
4:22
Then, so you can see its effect, I'll
copy and paste another console.log for
4:32
classroom size right after it.
4:36
So now when I run this in the console,
4:39
notice how the classroom size is set
to zero right after the clear method.
4:43
So the classroom object is now empty.
4:49
We can also use the for-of loop,
4:55
which iterates over a map
in the insertion order.
4:57
So, at the bottom of the file,
I'll say, for
5:03
let student of classroom
5:08
And the structure of the item returned,
in our case student, is an array with
5:16
two indexes, the first being the key and
the second being the value.
5:20
So we'll console.log a template string.
5:25
And inside, we'll interpolate student.
5:32
With an index of 0, and
this returns the key.
5:39
Then we'll interpolate student
with an index of 1 .name,
5:46
which returns a student's name value.
5:50
Then we'll say is student index of 1 .age,
5:55
which returns a student's age value.
6:00
And then we'll say years old.
6:07
So now I'll also comment out the three
if statements up top, just so
6:10
we can focus on the for-of
loop's console log.
6:13
All right, so
when I run the file in the console,
6:19
we see that it logs the keys names and
ages, cool.
6:23
There's a lot to learn about set and map.
6:29
You'll find more resources
in the teacher's notes.
6:31
Once you get using set and map,
it will improve your code and
6:34
make you more efficient developers.
6:37
Coming up in the next stage,
you'll get to know the new class object.
6:39
See you in a bit.
6:42