WEBVTT 1 00:00:01.240 --> 00:00:03.260 So, we learned about sets. 2 00:00:03.260 --> 00:00:04.440 Now, it's time to learn 3 00:00:04.440 --> 00:00:07.800 about the other new JavaScript data structure 4 00:00:07.800 --> 00:00:09.473 and that is maps. 5 00:00:11.060 --> 00:00:12.800 And, let me start by telling you 6 00:00:12.800 --> 00:00:16.650 that maps are a lot more useful than sets. 7 00:00:16.650 --> 00:00:19.540 So what exactly is a map? 8 00:00:19.540 --> 00:00:22.210 Well, it's certainly not the same thing 9 00:00:22.210 --> 00:00:23.980 that we use in the real life 10 00:00:23.980 --> 00:00:26.360 to find our ways around. 11 00:00:26.360 --> 00:00:28.520 Now, instead in JavaScript, 12 00:00:28.520 --> 00:00:30.640 a map is a data structure 13 00:00:30.640 --> 00:00:34.230 that we can use to map values to keys. 14 00:00:34.230 --> 00:00:35.970 So, just like an object 15 00:00:35.970 --> 00:00:39.670 data is stored in key value pairs in maps. 16 00:00:39.670 --> 00:00:42.950 Now, the big difference between objects and maps 17 00:00:42.950 --> 00:00:46.440 is that in maps, the keys can have any type 18 00:00:46.440 --> 00:00:48.540 and this can be huge. 19 00:00:48.540 --> 00:00:52.240 So, in objects, the keys are basically always strings. 20 00:00:52.240 --> 00:00:55.330 But in maps, we can have any type of key. 21 00:00:55.330 --> 00:00:59.520 It could even be objects, or arrays, or other maps. 22 00:00:59.520 --> 00:01:03.253 So, that can lead to some really great and advanced stuff. 23 00:01:04.810 --> 00:01:08.283 So, let's create a restaurant map here. 24 00:01:10.130 --> 00:01:11.963 So, I'm just calling it rest here. 25 00:01:13.470 --> 00:01:16.640 And so, we again use the constructor 26 00:01:16.640 --> 00:01:18.630 just like we used for the set, 27 00:01:18.630 --> 00:01:20.750 but this one called map. 28 00:01:20.750 --> 00:01:23.180 And the easiest way to create a map 29 00:01:23.180 --> 00:01:25.540 is to actually create an empty map 30 00:01:25.540 --> 00:01:26.730 just like this 31 00:01:26.730 --> 00:01:29.140 without passing anything in. 32 00:01:29.140 --> 00:01:31.400 And then, to fill up the map 33 00:01:31.400 --> 00:01:34.203 we can use the set method. 34 00:01:36.600 --> 00:01:39.400 And then here, we pass into arguments. 35 00:01:39.400 --> 00:01:41.403 The first is the key name. 36 00:01:42.490 --> 00:01:43.850 So, let's call it name. 37 00:01:43.850 --> 00:01:46.050 And then, the name of the restaurant itself. 38 00:01:48.010 --> 00:01:50.478 So, Classico Italiano. 39 00:01:50.478 --> 00:01:54.310 And, so you see, that this set method is pretty similar 40 00:01:54.310 --> 00:01:57.520 to the add method that we had in sets. 41 00:01:57.520 --> 00:02:00.870 So, both allow us to add a new element 42 00:02:00.870 --> 00:02:02.510 to the data structure. 43 00:02:02.510 --> 00:02:07.510 And, remember that we can use any data type that we want. 44 00:02:07.560 --> 00:02:10.890 So, let's say that the restaurant has two locations. 45 00:02:10.890 --> 00:02:14.130 So, we can create a key with a number. 46 00:02:14.130 --> 00:02:16.910 It doesn't have to be a string. 47 00:02:16.910 --> 00:02:19.493 So, let's say one is in Firenze, Italy. 48 00:02:22.090 --> 00:02:23.173 And the other one, 49 00:02:24.160 --> 00:02:25.480 so, a number two 50 00:02:27.080 --> 00:02:30.163 is in Lisbon, Portugal. 51 00:02:31.040 --> 00:02:33.810 And, calling the set method like this 52 00:02:33.810 --> 00:02:37.370 does not only update the map that it's called on, 53 00:02:37.370 --> 00:02:39.950 but it also returns the map. 54 00:02:39.950 --> 00:02:43.133 So, let me show that to you here. 55 00:02:46.220 --> 00:02:49.240 Okay, so this is what the set looks like 56 00:02:49.240 --> 00:02:51.863 after adding this key number two. 57 00:02:53.413 --> 00:02:55.350 (mouse clicking) 58 00:02:55.350 --> 00:02:57.420 So, here we have the entries. 59 00:02:57.420 --> 00:02:58.450 The first is name 60 00:02:58.450 --> 00:03:00.910 which is then mapped to Classico Italiano. 61 00:03:00.910 --> 00:03:04.130 And then, the other two that we just added. 62 00:03:04.130 --> 00:03:07.050 Now, the fact that the set method 63 00:03:07.050 --> 00:03:10.220 actually returns the updated map 64 00:03:10.220 --> 00:03:14.793 allows us to change the set method like this. 65 00:03:16.030 --> 00:03:20.010 So, let's set categories here 66 00:03:22.680 --> 00:03:26.073 as an array and I will just grab that from up here. 67 00:03:30.800 --> 00:03:32.550 Okay, so once more, 68 00:03:32.550 --> 00:03:34.510 the value can be anything. 69 00:03:34.510 --> 00:03:37.613 And now, I can just chain the next set on here. 70 00:03:37.613 --> 00:03:39.760 (mouse clicking) 71 00:03:39.760 --> 00:03:43.233 So, I can now say open and set it to 11. 72 00:03:44.248 --> 00:03:47.850 And then again, I can change the next one 73 00:03:47.850 --> 00:03:51.210 and say close at 23. 74 00:03:51.210 --> 00:03:52.410 So, let's save it. 75 00:03:52.410 --> 00:03:54.923 And this will then format this nicely. 76 00:03:55.790 --> 00:03:59.130 So, again, calling the set method 77 00:03:59.130 --> 00:04:01.590 returns the updated map. 78 00:04:01.590 --> 00:04:04.640 And so, all of this is now the updated map. 79 00:04:04.640 --> 00:04:08.393 And so, we can call set again on that map. 80 00:04:09.260 --> 00:04:11.483 And, we can continue this even further. 81 00:04:13.490 --> 00:04:14.370 So, that's not actually 82 00:04:14.370 --> 00:04:17.760 even use booleans as the key here. 83 00:04:17.760 --> 00:04:21.160 And, we can say that we want to map True 84 00:04:21.160 --> 00:04:24.641 to We are open. 85 00:04:24.641 --> 00:04:26.360 (mouse clicking) 86 00:04:26.360 --> 00:04:29.720 And then, we can also set False 87 00:04:29.720 --> 00:04:33.363 to We are closed. 88 00:04:34.300 --> 00:04:35.610 And, we will see in a minute 89 00:04:35.610 --> 00:04:40.610 how this can become useful, okay? 90 00:04:40.630 --> 00:04:43.020 Now, in order to read data from a map 91 00:04:43.020 --> 00:04:45.330 we use the Get method. 92 00:04:45.330 --> 00:04:49.223 And so, that get method is available on all the maps. 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 00:04:55.490 --> 00:04:57.570 So, let's see. 95 00:04:57.570 --> 00:04:59.520 Let's log this to the console actually. 96 00:05:00.860 --> 00:05:04.873 And, let's just duplicate it here and also log True. 97 00:05:06.170 --> 00:05:10.360 And, you see, that the True key here is then mapped 98 00:05:10.360 --> 00:05:11.900 to We are open 99 00:05:11.900 --> 00:05:15.240 and named to Classico Italiano of course. 100 00:05:15.240 --> 00:05:17.370 And here, when we get the elements 101 00:05:17.370 --> 00:05:20.480 of course the data type of the key matters. 102 00:05:20.480 --> 00:05:23.100 So, if we try it through the string 103 00:05:23.100 --> 00:05:24.693 then that would be undefined. 104 00:05:25.580 --> 00:05:29.680 And, if we tried to retrieve one, as a string, 105 00:05:29.680 --> 00:05:31.390 that would also be undefined. 106 00:05:31.390 --> 00:05:35.690 Because, here we have one, the number, as the key. 107 00:05:35.690 --> 00:05:38.543 And so, with this we will then get Firenze, Italy. 108 00:05:40.390 --> 00:05:41.640 All right. 109 00:05:41.640 --> 00:05:42.830 Now, just for fun 110 00:05:42.830 --> 00:05:44.340 let's use the fact 111 00:05:44.340 --> 00:05:46.540 that we can have Boolean keys. 112 00:05:46.540 --> 00:05:51.130 So, this True and False here, right? 113 00:05:51.130 --> 00:05:54.450 And, we also have the open and the close time. 114 00:05:54.450 --> 00:05:57.040 So, you see they are all kind of related. 115 00:05:57.040 --> 00:05:59.763 And so, let's create something fun with this. 116 00:06:01.290 --> 00:06:03.970 So, let's say we have some current time. 117 00:06:03.970 --> 00:06:07.220 And, we could actually get to current time from JavaScript 118 00:06:07.220 --> 00:06:09.130 but we don't know how yet. 119 00:06:09.130 --> 00:06:11.730 So, let's just say it's 21 hours. 120 00:06:11.730 --> 00:06:14.530 So, that's 9:00 PM. 121 00:06:14.530 --> 00:06:19.290 And then, we could do something really clever like this. 122 00:06:19.290 --> 00:06:21.980 So, rest.get 123 00:06:21.980 --> 00:06:24.700 and so, when we pass in True, 124 00:06:24.700 --> 00:06:26.850 then we will get, We are open. 125 00:06:26.850 --> 00:06:28.570 And, when we pass in False, 126 00:06:28.570 --> 00:06:30.850 we will get, We are closed. 127 00:06:30.850 --> 00:06:33.480 And so, in order to get the correct string here 128 00:06:33.480 --> 00:06:35.080 according to the time, 129 00:06:35.080 --> 00:06:38.010 all we need to do is to compare the current time 130 00:06:38.010 --> 00:06:41.410 with these two Open and Close, okay? 131 00:06:41.410 --> 00:06:42.763 So, let's do that. 132 00:06:44.190 --> 00:06:45.113 We can say, 133 00:06:46.080 --> 00:06:47.380 or we can ask, 134 00:06:47.380 --> 00:06:49.190 is the time, 135 00:06:49.190 --> 00:06:51.730 so, the current time greater 136 00:06:51.730 --> 00:06:56.363 than rest.get, open. 137 00:06:57.370 --> 00:06:59.320 And, at the same time, 138 00:06:59.320 --> 00:07:04.320 is it below rest.get, close. 139 00:07:06.970 --> 00:07:09.290 So basically, here we are asking 140 00:07:09.290 --> 00:07:13.020 if the current time is between 23 and 11. 141 00:07:13.020 --> 00:07:16.560 And so, this here is a True False value. 142 00:07:16.560 --> 00:07:19.660 And, this is a True False value so, Boolean. 143 00:07:19.660 --> 00:07:21.880 And so, the result of this end operation 144 00:07:21.880 --> 00:07:24.250 will be either True or False. 145 00:07:24.250 --> 00:07:27.590 And then, True or False will map 146 00:07:27.590 --> 00:07:30.320 to one of these values. 147 00:07:30.320 --> 00:07:32.620 So, that's really clever, right? 148 00:07:32.620 --> 00:07:35.733 So, let's unlog the results to the console. 149 00:07:37.340 --> 00:07:39.060 And, let's check it out. 150 00:07:39.060 --> 00:07:42.083 And so, at 21 hours, We are open. 151 00:07:42.930 --> 00:07:44.450 And, that makes sense. 152 00:07:44.450 --> 00:07:46.163 It is between these two times. 153 00:07:47.060 --> 00:07:49.460 But, if it was like eight hours, 154 00:07:49.460 --> 00:07:52.493 then we are closed, amazing. 155 00:07:54.250 --> 00:07:57.370 Now, this is as I said pretty clever, 156 00:07:57.370 --> 00:07:59.830 but it's not really so readable. 157 00:07:59.830 --> 00:08:03.490 So, don't overuse this kind of pattern, okay? 158 00:08:03.490 --> 00:08:05.880 This just really goes to show the power 159 00:08:05.880 --> 00:08:08.740 of having Booleans as map keys. 160 00:08:08.740 --> 00:08:12.130 But anyway, let's now keep exploring the methods 161 00:08:12.130 --> 00:08:14.420 that are available on maps. 162 00:08:14.420 --> 00:08:17.760 So, we already have methods to set and to get. 163 00:08:17.760 --> 00:08:21.933 Now, we can also check if a map contains a certain key. 164 00:08:23.480 --> 00:08:24.920 So, let's log to the console 165 00:08:24.920 --> 00:08:29.193 the result of calling the has method. 166 00:08:30.220 --> 00:08:34.120 So, categories, and so, this should be True. 167 00:08:34.120 --> 00:08:36.350 And, it is indeed True. 168 00:08:36.350 --> 00:08:39.910 Then, we can also delete elements from the map. 169 00:08:39.910 --> 00:08:43.610 And again, that happens based on the key. 170 00:08:43.610 --> 00:08:46.330 So, rest.delete. 171 00:08:46.330 --> 00:08:48.590 And, let's say that the second location 172 00:08:48.590 --> 00:08:50.640 should be closed now. 173 00:08:50.640 --> 00:08:53.540 So, this one here, the one in Lisbon. 174 00:08:53.540 --> 00:08:56.853 And so, we take that key and delete it from the map. 175 00:08:57.930 --> 00:09:02.223 And as a result, that will then be gone here. 176 00:09:03.320 --> 00:09:05.850 So, you see, no longer there. 177 00:09:05.850 --> 00:09:08.223 Now comparing this to objects, 178 00:09:09.160 --> 00:09:12.850 we can actually also delete properties from objects 179 00:09:12.850 --> 00:09:16.310 using something called the Delete Operator. 180 00:09:16.310 --> 00:09:18.360 But, that's a really slow process. 181 00:09:18.360 --> 00:09:22.440 And usually, it's not encouraged to do that here. 182 00:09:22.440 --> 00:09:24.650 About the has method. 183 00:09:24.650 --> 00:09:27.920 Actually, objects do also have a method 184 00:09:27.920 --> 00:09:30.450 which is called hasOwnProperty. 185 00:09:30.450 --> 00:09:31.870 But, we're gonna talk about that 186 00:09:31.870 --> 00:09:35.750 in the object oriented programming section, all right? 187 00:09:39.360 --> 00:09:43.070 Next, maps also have the size property. 188 00:09:43.070 --> 00:09:47.550 So, rest.size, of course. 189 00:09:47.550 --> 00:09:50.053 And, that should be seven as we can see here. 190 00:09:51.380 --> 00:09:54.820 And yeah, so it has seven items. 191 00:09:54.820 --> 00:09:57.950 And then, to finish, we can also clear. 192 00:09:57.950 --> 00:10:02.383 So basically, remove all the elements from the map. 193 00:10:04.210 --> 00:10:07.150 Let's just put that here. 194 00:10:07.150 --> 00:10:11.340 And so, now it's gone and it has a size of zero. 195 00:10:11.340 --> 00:10:12.513 Let's put that back. 196 00:10:13.400 --> 00:10:14.780 So, as you can see here, 197 00:10:14.780 --> 00:10:17.820 there is some overlap in the way that we work 198 00:10:17.820 --> 00:10:19.980 with maps and sets. 199 00:10:19.980 --> 00:10:23.173 And, that's because they were both introduced in ES6. 200 00:10:24.240 --> 00:10:26.300 And now just to finish, 201 00:10:26.300 --> 00:10:29.930 let me show you that we can in fact use arrays 202 00:10:29.930 --> 00:10:32.113 or objects as map keys. 203 00:10:33.980 --> 00:10:36.883 So, let's here set something else. 204 00:10:37.890 --> 00:10:39.490 And so, now as a key 205 00:10:39.490 --> 00:10:41.770 I will use this array 206 00:10:43.010 --> 00:10:48.010 and I will set it to Test, okay? 207 00:10:48.400 --> 00:10:50.340 And, let's just put that actually here. 208 00:10:50.340 --> 00:10:52.680 So, it's before the log 209 00:10:52.680 --> 00:10:54.143 so we can take a look at it. 210 00:10:55.400 --> 00:10:58.290 And so, here indeed we see 211 00:10:58.290 --> 00:10:59.730 this is now the key. 212 00:10:59.730 --> 00:11:03.270 This array, all right? 213 00:11:03.270 --> 00:11:05.930 But now, to get the data based on that array 214 00:11:07.590 --> 00:11:10.110 let me see how we could do that. 215 00:11:10.110 --> 00:11:12.723 So, rest.get. 216 00:11:14.090 --> 00:11:17.210 And, think about what we are doing here. 217 00:11:17.210 --> 00:11:18.860 Do you think that this will work? 218 00:11:20.240 --> 00:11:22.723 And actually, we need to log it to console. 219 00:11:23.870 --> 00:11:25.650 But, given what we learned 220 00:11:25.650 --> 00:11:27.320 in the previous section 221 00:11:27.320 --> 00:11:30.220 about how JavaScript works behind the scenes. 222 00:11:30.220 --> 00:11:33.730 Especially, primitives versus objects. 223 00:11:33.730 --> 00:11:37.193 Do you think that this will now retrieve Test? 224 00:11:38.960 --> 00:11:40.000 Well, let's see. 225 00:11:40.000 --> 00:11:42.770 And, no it did not. 226 00:11:42.770 --> 00:11:44.270 And the reason for that, 227 00:11:44.270 --> 00:11:46.500 is that these two arrays 228 00:11:46.500 --> 00:11:49.290 are actually not the same object. 229 00:11:49.290 --> 00:11:51.740 So, this array, and this one, 230 00:11:51.740 --> 00:11:54.020 even though we wrote them in the same way 231 00:11:54.020 --> 00:11:56.410 and so, they have the same elements, 232 00:11:56.410 --> 00:12:00.770 they are not the same object in the heap, okay? 233 00:12:00.770 --> 00:12:05.180 And, the key here is exactly this object. 234 00:12:05.180 --> 00:12:06.980 This object in memory, 235 00:12:06.980 --> 00:12:08.670 and not this one. 236 00:12:08.670 --> 00:12:11.190 And so, this cannot work. 237 00:12:11.190 --> 00:12:12.570 In order to make it work 238 00:12:12.570 --> 00:12:14.703 we would have to do this. 239 00:12:15.790 --> 00:12:18.620 Creating an array, one, two. 240 00:12:18.620 --> 00:12:21.473 And then, we use that array. 241 00:12:23.120 --> 00:12:25.420 And then, we also use the same array 242 00:12:25.420 --> 00:12:28.650 to read the value out of the map. 243 00:12:28.650 --> 00:12:31.930 And so now, it is gonna work, okay? 244 00:12:31.930 --> 00:12:33.490 Because, now of course 245 00:12:33.490 --> 00:12:37.220 these two refer to the same place in memory. 246 00:12:37.220 --> 00:12:39.530 Great, and so with this we proved 247 00:12:39.530 --> 00:12:44.400 that we can indeed use objects as map keys. 248 00:12:44.400 --> 00:12:47.490 And, this can be very useful with dumb elements 249 00:12:47.490 --> 00:12:51.440 which, in fact are also nothing more than just 250 00:12:51.440 --> 00:12:53.830 a special type of object. 251 00:12:53.830 --> 00:12:55.593 Let's do that here as well. 252 00:12:57.460 --> 00:13:01.400 Let's do rest.set. 253 00:13:01.400 --> 00:13:02.800 And now as a key, 254 00:13:02.800 --> 00:13:07.600 we will use document.queryselector. 255 00:13:07.600 --> 00:13:08.620 And then, we're gonna select 256 00:13:08.620 --> 00:13:11.590 these h1 elements that we have here. 257 00:13:11.590 --> 00:13:13.093 So, this is just an h1. 258 00:13:14.040 --> 00:13:15.730 So, nothing fancy. 259 00:13:15.730 --> 00:13:19.300 And so, the result of this will be an object. 260 00:13:19.300 --> 00:13:22.193 And so, let's say that this is the heading. 261 00:13:23.960 --> 00:13:26.340 That now as we check it out here, 262 00:13:26.340 --> 00:13:29.320 you will see that it's here indeed. 263 00:13:29.320 --> 00:13:31.010 So, as I hover it 264 00:13:31.010 --> 00:13:34.240 you can even see it here visible on the webpage. 265 00:13:34.240 --> 00:13:35.073 You see that? 266 00:13:35.073 --> 00:13:36.450 The highlight up there? 267 00:13:36.450 --> 00:13:40.940 That exactly is the key of this map entry. 268 00:13:40.940 --> 00:13:43.450 Sounds crazy, but it is possible 269 00:13:43.450 --> 00:13:47.370 and it can enable some advanced functionality. 270 00:13:47.370 --> 00:13:48.203 All right. 271 00:13:48.203 --> 00:13:50.280 So, we learned here how to create maps 272 00:13:50.280 --> 00:13:52.220 and, how to work with them. 273 00:13:52.220 --> 00:13:54.960 So, this should be enough for one lecture. 274 00:13:54.960 --> 00:13:57.510 And so, let's wrap up this one now. 275 00:13:57.510 --> 00:13:59.640 And, continue learning about maps 276 00:13:59.640 --> 00:14:00.813 in the next one.