Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,240 --> 00:00:03,260 So, we learned about sets. 2 2 00:00:03,260 --> 00:00:04,440 Now, it's time to learn 3 3 00:00:04,440 --> 00:00:07,800 about the other new JavaScript data structure 4 4 00:00:07,800 --> 00:00:09,473 and that is maps. 5 5 00:00:11,060 --> 00:00:12,800 And, let me start by telling you 6 6 00:00:12,800 --> 00:00:16,650 that maps are a lot more useful than sets. 7 7 00:00:16,650 --> 00:00:19,540 So what exactly is a map? 8 8 00:00:19,540 --> 00:00:22,210 Well, it's certainly not the same thing 9 9 00:00:22,210 --> 00:00:23,980 that we use in the real life 10 10 00:00:23,980 --> 00:00:26,360 to find our ways around. 11 11 00:00:26,360 --> 00:00:28,520 Now, instead in JavaScript, 12 12 00:00:28,520 --> 00:00:30,640 a map is a data structure 13 13 00:00:30,640 --> 00:00:34,230 that we can use to map values to keys. 14 14 00:00:34,230 --> 00:00:35,970 So, just like an object 15 15 00:00:35,970 --> 00:00:39,670 data is stored in key value pairs in maps. 16 16 00:00:39,670 --> 00:00:42,950 Now, the big difference between objects and maps 17 17 00:00:42,950 --> 00:00:46,440 is that in maps, the keys can have any type 18 18 00:00:46,440 --> 00:00:48,540 and this can be huge. 19 19 00:00:48,540 --> 00:00:52,240 So, in objects, the keys are basically always strings. 20 20 00:00:52,240 --> 00:00:55,330 But in maps, we can have any type of key. 21 21 00:00:55,330 --> 00:00:59,520 It could even be objects, or arrays, or other maps. 22 22 00:00:59,520 --> 00:01:03,253 So, that can lead to some really great and advanced stuff. 23 23 00:01:04,810 --> 00:01:08,283 So, let's create a restaurant map here. 24 24 00:01:10,130 --> 00:01:11,963 So, I'm just calling it rest here. 25 25 00:01:13,470 --> 00:01:16,640 And so, we again use the constructor 26 26 00:01:16,640 --> 00:01:18,630 just like we used for the set, 27 27 00:01:18,630 --> 00:01:20,750 but this one called map. 28 28 00:01:20,750 --> 00:01:23,180 And the easiest way to create a map 29 29 00:01:23,180 --> 00:01:25,540 is to actually create an empty map 30 30 00:01:25,540 --> 00:01:26,730 just like this 31 31 00:01:26,730 --> 00:01:29,140 without passing anything in. 32 32 00:01:29,140 --> 00:01:31,400 And then, to fill up the map 33 33 00:01:31,400 --> 00:01:34,203 we can use the set method. 34 34 00:01:36,600 --> 00:01:39,400 And then here, we pass into arguments. 35 35 00:01:39,400 --> 00:01:41,403 The first is the key name. 36 36 00:01:42,490 --> 00:01:43,850 So, let's call it name. 37 37 00:01:43,850 --> 00:01:46,050 And then, the name of the restaurant itself. 38 38 00:01:48,010 --> 00:01:50,478 So, Classico Italiano. 39 39 00:01:50,478 --> 00:01:54,310 And, so you see, that this set method is pretty similar 40 40 00:01:54,310 --> 00:01:57,520 to the add method that we had in sets. 41 41 00:01:57,520 --> 00:02:00,870 So, both allow us to add a new element 42 42 00:02:00,870 --> 00:02:02,510 to the data structure. 43 43 00:02:02,510 --> 00:02:07,510 And, remember that we can use any data type that we want. 44 44 00:02:07,560 --> 00:02:10,890 So, let's say that the restaurant has two locations. 45 45 00:02:10,890 --> 00:02:14,130 So, we can create a key with a number. 46 46 00:02:14,130 --> 00:02:16,910 It doesn't have to be a string. 47 47 00:02:16,910 --> 00:02:19,493 So, let's say one is in Firenze, Italy. 48 48 00:02:22,090 --> 00:02:23,173 And the other one, 49 49 00:02:24,160 --> 00:02:25,480 so, a number two 50 50 00:02:27,080 --> 00:02:30,163 is in Lisbon, Portugal. 51 51 00:02:31,040 --> 00:02:33,810 And, calling the set method like this 52 52 00:02:33,810 --> 00:02:37,370 does not only update the map that it's called on, 53 53 00:02:37,370 --> 00:02:39,950 but it also returns the map. 54 54 00:02:39,950 --> 00:02:43,133 So, let me show that to you here. 55 55 00:02:46,220 --> 00:02:49,240 Okay, so this is what the set looks like 56 56 00:02:49,240 --> 00:02:51,863 after adding this key number two. 57 57 00:02:53,413 --> 00:02:55,350 (mouse clicking) 58 58 00:02:55,350 --> 00:02:57,420 So, here we have the entries. 59 59 00:02:57,420 --> 00:02:58,450 The first is name 60 60 00:02:58,450 --> 00:03:00,910 which is then mapped to Classico Italiano. 61 61 00:03:00,910 --> 00:03:04,130 And then, the other two that we just added. 62 62 00:03:04,130 --> 00:03:07,050 Now, the fact that the set method 63 63 00:03:07,050 --> 00:03:10,220 actually returns the updated map 64 64 00:03:10,220 --> 00:03:14,793 allows us to change the set method like this. 65 65 00:03:16,030 --> 00:03:20,010 So, let's set categories here 66 66 00:03:22,680 --> 00:03:26,073 as an array and I will just grab that from up here. 67 67 00:03:30,800 --> 00:03:32,550 Okay, so once more, 68 68 00:03:32,550 --> 00:03:34,510 the value can be anything. 69 69 00:03:34,510 --> 00:03:37,613 And now, I can just chain the next set on here. 70 70 00:03:37,613 --> 00:03:39,760 (mouse clicking) 71 71 00:03:39,760 --> 00:03:43,233 So, I can now say open and set it to 11. 72 72 00:03:44,248 --> 00:03:47,850 And then again, I can change the next one 73 73 00:03:47,850 --> 00:03:51,210 and say close at 23. 74 74 00:03:51,210 --> 00:03:52,410 So, let's save it. 75 75 00:03:52,410 --> 00:03:54,923 And this will then format this nicely. 76 76 00:03:55,790 --> 00:03:59,130 So, again, calling the set method 77 77 00:03:59,130 --> 00:04:01,590 returns the updated map. 78 78 00:04:01,590 --> 00:04:04,640 And so, all of this is now the updated map. 79 79 00:04:04,640 --> 00:04:08,393 And so, we can call set again on that map. 80 80 00:04:09,260 --> 00:04:11,483 And, we can continue this even further. 81 81 00:04:13,490 --> 00:04:14,370 So, that's not actually 82 82 00:04:14,370 --> 00:04:17,760 even use booleans as the key here. 83 83 00:04:17,760 --> 00:04:21,160 And, we can say that we want to map True 84 84 00:04:21,160 --> 00:04:24,641 to We are open. 85 85 00:04:24,641 --> 00:04:26,360 (mouse clicking) 86 86 00:04:26,360 --> 00:04:29,720 And then, we can also set False 87 87 00:04:29,720 --> 00:04:33,363 to We are closed. 88 88 00:04:34,300 --> 00:04:35,610 And, we will see in a minute 89 89 00:04:35,610 --> 00:04:40,610 how this can become useful, okay? 90 90 00:04:40,630 --> 00:04:43,020 Now, in order to read data from a map 91 91 00:04:43,020 --> 00:04:45,330 we use the Get method. 92 92 00:04:45,330 --> 00:04:49,223 And so, that get method is available on all the maps. 93 93 00:04:50,330 --> 00:04:54,633 And so, all we need to do is to pass in the name of the key. 94 94 00:04:55,490 --> 00:04:57,570 So, let's see. 95 95 00:04:57,570 --> 00:04:59,520 Let's log this to the console actually. 96 96 00:05:00,860 --> 00:05:04,873 And, let's just duplicate it here and also log True. 97 97 00:05:06,170 --> 00:05:10,360 And, you see, that the True key here is then mapped 98 98 00:05:10,360 --> 00:05:11,900 to We are open 99 99 00:05:11,900 --> 00:05:15,240 and named to Classico Italiano of course. 100 100 00:05:15,240 --> 00:05:17,370 And here, when we get the elements 101 101 00:05:17,370 --> 00:05:20,480 of course the data type of the key matters. 102 102 00:05:20,480 --> 00:05:23,100 So, if we try it through the string 103 103 00:05:23,100 --> 00:05:24,693 then that would be undefined. 104 104 00:05:25,580 --> 00:05:29,680 And, if we tried to retrieve one, as a string, 105 105 00:05:29,680 --> 00:05:31,390 that would also be undefined. 106 106 00:05:31,390 --> 00:05:35,690 Because, here we have one, the number, as the key. 107 107 00:05:35,690 --> 00:05:38,543 And so, with this we will then get Firenze, Italy. 108 108 00:05:40,390 --> 00:05:41,640 All right. 109 109 00:05:41,640 --> 00:05:42,830 Now, just for fun 110 110 00:05:42,830 --> 00:05:44,340 let's use the fact 111 111 00:05:44,340 --> 00:05:46,540 that we can have Boolean keys. 112 112 00:05:46,540 --> 00:05:51,130 So, this True and False here, right? 113 113 00:05:51,130 --> 00:05:54,450 And, we also have the open and the close time. 114 114 00:05:54,450 --> 00:05:57,040 So, you see they are all kind of related. 115 115 00:05:57,040 --> 00:05:59,763 And so, let's create something fun with this. 116 116 00:06:01,290 --> 00:06:03,970 So, let's say we have some current time. 117 117 00:06:03,970 --> 00:06:07,220 And, we could actually get to current time from JavaScript 118 118 00:06:07,220 --> 00:06:09,130 but we don't know how yet. 119 119 00:06:09,130 --> 00:06:11,730 So, let's just say it's 21 hours. 120 120 00:06:11,730 --> 00:06:14,530 So, that's 9:00 PM. 121 121 00:06:14,530 --> 00:06:19,290 And then, we could do something really clever like this. 122 122 00:06:19,290 --> 00:06:21,980 So, rest.get 123 123 00:06:21,980 --> 00:06:24,700 and so, when we pass in True, 124 124 00:06:24,700 --> 00:06:26,850 then we will get, We are open. 125 125 00:06:26,850 --> 00:06:28,570 And, when we pass in False, 126 126 00:06:28,570 --> 00:06:30,850 we will get, We are closed. 127 127 00:06:30,850 --> 00:06:33,480 And so, in order to get the correct string here 128 128 00:06:33,480 --> 00:06:35,080 according to the time, 129 129 00:06:35,080 --> 00:06:38,010 all we need to do is to compare the current time 130 130 00:06:38,010 --> 00:06:41,410 with these two Open and Close, okay? 131 131 00:06:41,410 --> 00:06:42,763 So, let's do that. 132 132 00:06:44,190 --> 00:06:45,113 We can say, 133 133 00:06:46,080 --> 00:06:47,380 or we can ask, 134 134 00:06:47,380 --> 00:06:49,190 is the time, 135 135 00:06:49,190 --> 00:06:51,730 so, the current time greater 136 136 00:06:51,730 --> 00:06:56,363 than rest.get, open. 137 137 00:06:57,370 --> 00:06:59,320 And, at the same time, 138 138 00:06:59,320 --> 00:07:04,320 is it below rest.get, close. 139 139 00:07:06,970 --> 00:07:09,290 So basically, here we are asking 140 140 00:07:09,290 --> 00:07:13,020 if the current time is between 23 and 11. 141 141 00:07:13,020 --> 00:07:16,560 And so, this here is a True False value. 142 142 00:07:16,560 --> 00:07:19,660 And, this is a True False value so, Boolean. 143 143 00:07:19,660 --> 00:07:21,880 And so, the result of this end operation 144 144 00:07:21,880 --> 00:07:24,250 will be either True or False. 145 145 00:07:24,250 --> 00:07:27,590 And then, True or False will map 146 146 00:07:27,590 --> 00:07:30,320 to one of these values. 147 147 00:07:30,320 --> 00:07:32,620 So, that's really clever, right? 148 148 00:07:32,620 --> 00:07:35,733 So, let's unlog the results to the console. 149 149 00:07:37,340 --> 00:07:39,060 And, let's check it out. 150 150 00:07:39,060 --> 00:07:42,083 And so, at 21 hours, We are open. 151 151 00:07:42,930 --> 00:07:44,450 And, that makes sense. 152 152 00:07:44,450 --> 00:07:46,163 It is between these two times. 153 153 00:07:47,060 --> 00:07:49,460 But, if it was like eight hours, 154 154 00:07:49,460 --> 00:07:52,493 then we are closed, amazing. 155 155 00:07:54,250 --> 00:07:57,370 Now, this is as I said pretty clever, 156 156 00:07:57,370 --> 00:07:59,830 but it's not really so readable. 157 157 00:07:59,830 --> 00:08:03,490 So, don't overuse this kind of pattern, okay? 158 158 00:08:03,490 --> 00:08:05,880 This just really goes to show the power 159 159 00:08:05,880 --> 00:08:08,740 of having Booleans as map keys. 160 160 00:08:08,740 --> 00:08:12,130 But anyway, let's now keep exploring the methods 161 161 00:08:12,130 --> 00:08:14,420 that are available on maps. 162 162 00:08:14,420 --> 00:08:17,760 So, we already have methods to set and to get. 163 163 00:08:17,760 --> 00:08:21,933 Now, we can also check if a map contains a certain key. 164 164 00:08:23,480 --> 00:08:24,920 So, let's log to the console 165 165 00:08:24,920 --> 00:08:29,193 the result of calling the has method. 166 166 00:08:30,220 --> 00:08:34,120 So, categories, and so, this should be True. 167 167 00:08:34,120 --> 00:08:36,350 And, it is indeed True. 168 168 00:08:36,350 --> 00:08:39,910 Then, we can also delete elements from the map. 169 169 00:08:39,910 --> 00:08:43,610 And again, that happens based on the key. 170 170 00:08:43,610 --> 00:08:46,330 So, rest.delete. 171 171 00:08:46,330 --> 00:08:48,590 And, let's say that the second location 172 172 00:08:48,590 --> 00:08:50,640 should be closed now. 173 173 00:08:50,640 --> 00:08:53,540 So, this one here, the one in Lisbon. 174 174 00:08:53,540 --> 00:08:56,853 And so, we take that key and delete it from the map. 175 175 00:08:57,930 --> 00:09:02,223 And as a result, that will then be gone here. 176 176 00:09:03,320 --> 00:09:05,850 So, you see, no longer there. 177 177 00:09:05,850 --> 00:09:08,223 Now comparing this to objects, 178 178 00:09:09,160 --> 00:09:12,850 we can actually also delete properties from objects 179 179 00:09:12,850 --> 00:09:16,310 using something called the Delete Operator. 180 180 00:09:16,310 --> 00:09:18,360 But, that's a really slow process. 181 181 00:09:18,360 --> 00:09:22,440 And usually, it's not encouraged to do that here. 182 182 00:09:22,440 --> 00:09:24,650 About the has method. 183 183 00:09:24,650 --> 00:09:27,920 Actually, objects do also have a method 184 184 00:09:27,920 --> 00:09:30,450 which is called hasOwnProperty. 185 185 00:09:30,450 --> 00:09:31,870 But, we're gonna talk about that 186 186 00:09:31,870 --> 00:09:35,750 in the object oriented programming section, all right? 187 187 00:09:39,360 --> 00:09:43,070 Next, maps also have the size property. 188 188 00:09:43,070 --> 00:09:47,550 So, rest.size, of course. 189 189 00:09:47,550 --> 00:09:50,053 And, that should be seven as we can see here. 190 190 00:09:51,380 --> 00:09:54,820 And yeah, so it has seven items. 191 191 00:09:54,820 --> 00:09:57,950 And then, to finish, we can also clear. 192 192 00:09:57,950 --> 00:10:02,383 So basically, remove all the elements from the map. 193 193 00:10:04,210 --> 00:10:07,150 Let's just put that here. 194 194 00:10:07,150 --> 00:10:11,340 And so, now it's gone and it has a size of zero. 195 195 00:10:11,340 --> 00:10:12,513 Let's put that back. 196 196 00:10:13,400 --> 00:10:14,780 So, as you can see here, 197 197 00:10:14,780 --> 00:10:17,820 there is some overlap in the way that we work 198 198 00:10:17,820 --> 00:10:19,980 with maps and sets. 199 199 00:10:19,980 --> 00:10:23,173 And, that's because they were both introduced in ES6. 200 200 00:10:24,240 --> 00:10:26,300 And now just to finish, 201 201 00:10:26,300 --> 00:10:29,930 let me show you that we can in fact use arrays 202 202 00:10:29,930 --> 00:10:32,113 or objects as map keys. 203 203 00:10:33,980 --> 00:10:36,883 So, let's here set something else. 204 204 00:10:37,890 --> 00:10:39,490 And so, now as a key 205 205 00:10:39,490 --> 00:10:41,770 I will use this array 206 206 00:10:43,010 --> 00:10:48,010 and I will set it to Test, okay? 207 207 00:10:48,400 --> 00:10:50,340 And, let's just put that actually here. 208 208 00:10:50,340 --> 00:10:52,680 So, it's before the log 209 209 00:10:52,680 --> 00:10:54,143 so we can take a look at it. 210 210 00:10:55,400 --> 00:10:58,290 And so, here indeed we see 211 211 00:10:58,290 --> 00:10:59,730 this is now the key. 212 212 00:10:59,730 --> 00:11:03,270 This array, all right? 213 213 00:11:03,270 --> 00:11:05,930 But now, to get the data based on that array 214 214 00:11:07,590 --> 00:11:10,110 let me see how we could do that. 215 215 00:11:10,110 --> 00:11:12,723 So, rest.get. 216 216 00:11:14,090 --> 00:11:17,210 And, think about what we are doing here. 217 217 00:11:17,210 --> 00:11:18,860 Do you think that this will work? 218 218 00:11:20,240 --> 00:11:22,723 And actually, we need to log it to console. 219 219 00:11:23,870 --> 00:11:25,650 But, given what we learned 220 220 00:11:25,650 --> 00:11:27,320 in the previous section 221 221 00:11:27,320 --> 00:11:30,220 about how JavaScript works behind the scenes. 222 222 00:11:30,220 --> 00:11:33,730 Especially, primitives versus objects. 223 223 00:11:33,730 --> 00:11:37,193 Do you think that this will now retrieve Test? 224 224 00:11:38,960 --> 00:11:40,000 Well, let's see. 225 225 00:11:40,000 --> 00:11:42,770 And, no it did not. 226 226 00:11:42,770 --> 00:11:44,270 And the reason for that, 227 227 00:11:44,270 --> 00:11:46,500 is that these two arrays 228 228 00:11:46,500 --> 00:11:49,290 are actually not the same object. 229 229 00:11:49,290 --> 00:11:51,740 So, this array, and this one, 230 230 00:11:51,740 --> 00:11:54,020 even though we wrote them in the same way 231 231 00:11:54,020 --> 00:11:56,410 and so, they have the same elements, 232 232 00:11:56,410 --> 00:12:00,770 they are not the same object in the heap, okay? 233 233 00:12:00,770 --> 00:12:05,180 And, the key here is exactly this object. 234 234 00:12:05,180 --> 00:12:06,980 This object in memory, 235 235 00:12:06,980 --> 00:12:08,670 and not this one. 236 236 00:12:08,670 --> 00:12:11,190 And so, this cannot work. 237 237 00:12:11,190 --> 00:12:12,570 In order to make it work 238 238 00:12:12,570 --> 00:12:14,703 we would have to do this. 239 239 00:12:15,790 --> 00:12:18,620 Creating an array, one, two. 240 240 00:12:18,620 --> 00:12:21,473 And then, we use that array. 241 241 00:12:23,120 --> 00:12:25,420 And then, we also use the same array 242 242 00:12:25,420 --> 00:12:28,650 to read the value out of the map. 243 243 00:12:28,650 --> 00:12:31,930 And so now, it is gonna work, okay? 244 244 00:12:31,930 --> 00:12:33,490 Because, now of course 245 245 00:12:33,490 --> 00:12:37,220 these two refer to the same place in memory. 246 246 00:12:37,220 --> 00:12:39,530 Great, and so with this we proved 247 247 00:12:39,530 --> 00:12:44,400 that we can indeed use objects as map keys. 248 248 00:12:44,400 --> 00:12:47,490 And, this can be very useful with dumb elements 249 249 00:12:47,490 --> 00:12:51,440 which, in fact are also nothing more than just 250 250 00:12:51,440 --> 00:12:53,830 a special type of object. 251 251 00:12:53,830 --> 00:12:55,593 Let's do that here as well. 252 252 00:12:57,460 --> 00:13:01,400 Let's do rest.set. 253 253 00:13:01,400 --> 00:13:02,800 And now as a key, 254 254 00:13:02,800 --> 00:13:07,600 we will use document.queryselector. 255 255 00:13:07,600 --> 00:13:08,620 And then, we're gonna select 256 256 00:13:08,620 --> 00:13:11,590 these h1 elements that we have here. 257 257 00:13:11,590 --> 00:13:13,093 So, this is just an h1. 258 258 00:13:14,040 --> 00:13:15,730 So, nothing fancy. 259 259 00:13:15,730 --> 00:13:19,300 And so, the result of this will be an object. 260 260 00:13:19,300 --> 00:13:22,193 And so, let's say that this is the heading. 261 261 00:13:23,960 --> 00:13:26,340 That now as we check it out here, 262 262 00:13:26,340 --> 00:13:29,320 you will see that it's here indeed. 263 263 00:13:29,320 --> 00:13:31,010 So, as I hover it 264 264 00:13:31,010 --> 00:13:34,240 you can even see it here visible on the webpage. 265 265 00:13:34,240 --> 00:13:35,073 You see that? 266 266 00:13:35,073 --> 00:13:36,450 The highlight up there? 267 267 00:13:36,450 --> 00:13:40,940 That exactly is the key of this map entry. 268 268 00:13:40,940 --> 00:13:43,450 Sounds crazy, but it is possible 269 269 00:13:43,450 --> 00:13:47,370 and it can enable some advanced functionality. 270 270 00:13:47,370 --> 00:13:48,203 All right. 271 271 00:13:48,203 --> 00:13:50,280 So, we learned here how to create maps 272 272 00:13:50,280 --> 00:13:52,220 and, how to work with them. 273 273 00:13:52,220 --> 00:13:54,960 So, this should be enough for one lecture. 274 274 00:13:54,960 --> 00:13:57,510 And so, let's wrap up this one now. 275 275 00:13:57,510 --> 00:13:59,640 And, continue learning about maps 276 276 00:13:59,640 --> 00:14:00,813 in the next one. 22405