1
00:00:00,400 --> 00:00:02,680
Map is a special kind of object.

2
00:00:02,680 --> 00:00:06,570
If you've ever created a hash table,
you'll likely find maps intuitive to use.

3
00:00:06,570 --> 00:00:08,270
So let's take a look at some examples.

4
00:00:08,270 --> 00:00:10,440
And to follow along using
the latest workspace, go ahead and

5
00:00:10,440 --> 00:00:12,460
launch the workspace for this video.

6
00:00:12,460 --> 00:00:18,060
In the file classroom-map.js,
I have a classroom, which is a Map object.

7
00:00:18,060 --> 00:00:22,010
And like in the previous video, I'm
going to add students to the classroom.

8
00:00:22,010 --> 00:00:25,462
So I'll create my students by pasting
in the student objects we used in

9
00:00:25,462 --> 00:00:26,521
the previous video.

10
00:00:26,521 --> 00:00:29,800
And you can also copy these from
the teacher's notes of this video.

11
00:00:29,800 --> 00:00:34,040
So again, we have StevenJ,
Sarah, and StevenS.

12
00:00:34,040 --> 00:00:39,570
So now, to add the three students to
the classroom, I'll use the set method.

13
00:00:39,570 --> 00:00:42,610
Set takes two arguments,
a key and a value.

14
00:00:42,610 --> 00:00:43,868
The first for StevenJ.

15
00:00:43,868 --> 00:00:48,065
I'll write classroom.set.

16
00:00:48,065 --> 00:00:54,441
And as the key,
I'll pass the string stevenJ.

17
00:00:54,441 --> 00:00:57,160
And for the value, I'll write stevenJ.

18
00:00:58,870 --> 00:01:07,560
So now, for Sarah,
we'll say classroom.set sarah, then sarah.

19
00:01:07,560 --> 00:01:09,194
And we'll do the same for StevenS.

20
00:01:09,194 --> 00:01:12,818
So we'll say classroom.set stevenS,
then stevenS.

21
00:01:12,818 --> 00:01:17,292
And now, to see the total number
of values in the classroom,

22
00:01:17,292 --> 00:01:20,130
we'll log out the size property.

23
00:01:20,130 --> 00:01:24,104
So like in the previous video,
I'll type console.log.

24
00:01:24,104 --> 00:01:28,510
I'll log the string classroom size.

25
00:01:32,807 --> 00:01:36,210
Then classroom.size.

26
00:01:36,210 --> 00:01:41,940
And next, I might want to check
the classroom to see if a key exists.

27
00:01:41,940 --> 00:01:44,200
When working with objects in JavaScript,

28
00:01:44,200 --> 00:01:47,840
we've generally relied on
hasOwnProperty to do this.

29
00:01:47,840 --> 00:01:52,290
Well, with Map, we can also use the has
method you learned about in the previous

30
00:01:52,290 --> 00:01:57,300
video to indicate whether an element
with the specified key exists or not.

31
00:01:57,300 --> 00:02:00,709
So first I'll say,

32
00:02:00,709 --> 00:02:08,130
if classroom.has stevenJ console.log,

33
00:02:08,130 --> 00:02:13,150
stevenJ is in the classroom.

34
00:02:21,821 --> 00:02:23,430
And for Sarah, we'll do the same.

35
00:02:23,430 --> 00:02:29,650
We'll say if classroom.has sarah
console.log, sarah is in the classroom.

36
00:02:31,400 --> 00:02:33,438
And finally, we'll say,

37
00:02:33,438 --> 00:02:38,850
if classroom.has stephenS console.log
stevenS is in the classroom.

38
00:02:40,330 --> 00:02:43,440
So now let's run this file to see
what gets logged to the console.

39
00:02:47,604 --> 00:02:52,557
Okay, so great, I have a classroom
size of 3 with stevenJ, sarah, and

40
00:02:52,557 --> 00:02:55,170
stevenS in the classroom, perfect.

41
00:02:57,780 --> 00:03:02,820
And now we can retrieve the value of
a given key by using the get method and

42
00:03:02,820 --> 00:03:04,640
supplying a key.

43
00:03:04,640 --> 00:03:09,144
So, right below the if statements,

44
00:03:09,144 --> 00:03:14,375
to get the properties and values of sarah,

45
00:03:14,375 --> 00:03:18,591
I'll write console.log sarah,

46
00:03:18,591 --> 00:03:24,861
then we'll say classroom.get
the string sarah.

47
00:03:26,850 --> 00:03:30,871
So now when I run this file in
the console, it returns the name and

48
00:03:30,871 --> 00:03:32,295
age values for Sarah.

49
00:03:38,496 --> 00:03:42,630
So now let's use the delete method
to remove Sarah from the map.

50
00:03:42,630 --> 00:03:47,359
I'll delete Sarah right
before the console.log with

51
00:03:47,359 --> 00:03:50,450
the get method to see what happens.

52
00:03:50,450 --> 00:03:57,680
I'll type classroom.delete sarah.

53
00:03:57,680 --> 00:03:59,350
So now I'll run the file in the console.

54
00:04:01,830 --> 00:04:06,850
And as you can see, I've successfully
removed the key-value pair for Sarah.

55
00:04:06,850 --> 00:04:08,650
It now returns as undefined.

56
00:04:12,295 --> 00:04:14,547
When working with either a set or a map,

57
00:04:14,547 --> 00:04:19,380
you may need to empty the object without
destroying the object in memory.

58
00:04:19,380 --> 00:04:22,289
To do this, you use the clear method.

59
00:04:22,289 --> 00:04:28,320
So I'll add classroom.clear right after
the console.log for classroom size.

60
00:04:32,706 --> 00:04:36,928
Then, so you can see its effect, I'll
copy and paste another console.log for

61
00:04:36,928 --> 00:04:39,440
classroom size right after it.

62
00:04:39,440 --> 00:04:41,580
So now when I run this in the console,

63
00:04:43,390 --> 00:04:47,880
notice how the classroom size is set
to zero right after the clear method.

64
00:04:49,120 --> 00:04:51,100
So the classroom object is now empty.

65
00:04:55,319 --> 00:04:57,927
We can also use the for-of loop,

66
00:04:57,927 --> 00:05:01,850
which iterates over a map
in the insertion order.

67
00:05:03,590 --> 00:05:08,543
So, at the bottom of the file,
I'll say, for

68
00:05:08,543 --> 00:05:11,217
let student of classroom

69
00:05:16,010 --> 00:05:20,923
And the structure of the item returned,
in our case student, is an array with

70
00:05:20,923 --> 00:05:25,860
two indexes, the first being the key and
the second being the value.

71
00:05:25,860 --> 00:05:28,970
So we'll console.log a template string.

72
00:05:32,270 --> 00:05:36,850
And inside, we'll interpolate student.

73
00:05:39,837 --> 00:05:43,410
With an index of 0, and
this returns the key.

74
00:05:46,188 --> 00:05:50,881
Then we'll interpolate student
with an index of 1 .name,

75
00:05:50,881 --> 00:05:55,000
which returns a student's name value.

76
00:05:55,000 --> 00:06:00,700
Then we'll say is student index of 1 .age,

77
00:06:00,700 --> 00:06:05,660
which returns a student's age value.

78
00:06:07,260 --> 00:06:08,470
And then we'll say years old.

79
00:06:10,245 --> 00:06:13,950
So now I'll also comment out the three
if statements up top, just so

80
00:06:13,950 --> 00:06:16,724
we can focus on the for-of
loop's console log.

81
00:06:19,350 --> 00:06:23,641
All right, so
when I run the file in the console,

82
00:06:23,641 --> 00:06:28,050
we see that it logs the keys names and
ages, cool.

83
00:06:29,450 --> 00:06:31,570
There's a lot to learn about set and map.

84
00:06:31,570 --> 00:06:34,100
You'll find more resources
in the teacher's notes.

85
00:06:34,100 --> 00:06:37,000
Once you get using set and map,
it will improve your code and

86
00:06:37,000 --> 00:06:39,310
make you more efficient developers.

87
00:06:39,310 --> 00:06:42,450
Coming up in the next stage,
you'll get to know the new class object.

88
00:06:42,450 --> 00:06:42,950
See you in a bit.