"WordPress Admin Settings" was retired on December 16, 2016. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introducing ES2015!
You have completed Introducing ES2015!
Preview
In this video we’ll look at the new Map object.
Code snippets
let stevenJ = { name: 'Steven', age: 22 },
sarah = { name: 'Sarah', age: 23 },
stevenS = { name: 'Steven', age: 22 };
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up