WEBVTT 1 00:00:01.167 --> 00:00:03.493 Welcome back, I will now show you 2 00:00:03.493 --> 00:00:07.031 something that is entirely new is ES6, 3 00:00:07.031 --> 00:00:10.154 and that's a new data structure called map. 4 00:00:10.154 --> 00:00:11.865 And in case that you're wondering, 5 00:00:11.865 --> 00:00:14.319 this doesn't have anything to do with actual maps 6 00:00:14.319 --> 00:00:16.713 like you see on Google Maps or something. 7 00:00:16.713 --> 00:00:19.963 So let me explain what maps are in ES6. 8 00:00:22.108 --> 00:00:25.187 So a very common use of JavaScript objects 9 00:00:25.187 --> 00:00:28.544 is to use them as hash maps, which simply means 10 00:00:28.544 --> 00:00:32.088 that we map string keys to arbitrary values, 11 00:00:32.088 --> 00:00:34.627 and we did that a lot earlier in the course. 12 00:00:34.627 --> 00:00:37.476 Especially in the basic section, for example, 13 00:00:37.476 --> 00:00:40.169 in our more simple John object. 14 00:00:40.169 --> 00:00:44.449 Back then we had simple keys like name, age or job, 15 00:00:44.449 --> 00:00:48.616 and then mapped values to them, like John, 27 and teacher. 16 00:00:49.817 --> 00:00:54.315 Now this is called a hash map, and up until ES6, 17 00:00:54.315 --> 00:00:57.928 we had to use objects for that, but now in ES6, 18 00:00:57.928 --> 00:01:01.305 we have something better, and that's maps. 19 00:01:01.305 --> 00:01:06.301 So a map is a new key-value data structure in ES6, 20 00:01:06.301 --> 00:01:09.251 and one of the big differences is that in maps, 21 00:01:09.251 --> 00:01:12.002 we can use anything for the keys. 22 00:01:12.002 --> 00:01:15.171 So in object we are limited to strings, 23 00:01:15.171 --> 00:01:18.404 but in maps we can use any kind of primitive value 24 00:01:18.404 --> 00:01:21.155 like numbers, strings or Booleans, 25 00:01:21.155 --> 00:01:24.334 and we can even use functions or objects as keys, 26 00:01:24.334 --> 00:01:27.048 which is really cool, and really a big deal. 27 00:01:27.048 --> 00:01:30.106 All right, but enough theory, let's actually use this 28 00:01:30.106 --> 00:01:33.721 in practice, and construct our first map, 29 00:01:33.721 --> 00:01:36.513 and we're gonna implement a very, very simple quiz 30 00:01:36.513 --> 00:01:41.063 with only one question, just to show you how maps work. 31 00:01:41.063 --> 00:01:43.747 So this is how we create a map. 32 00:01:43.747 --> 00:01:47.457 Let's create a variable and it will be a constant, 33 00:01:47.457 --> 00:01:50.900 and I'm just gonna call it "question," 34 00:01:50.900 --> 00:01:55.169 and we say we want a new Map, and that's it. 35 00:01:55.169 --> 00:01:58.218 So we just created a new empty map, 36 00:01:58.218 --> 00:02:01.444 so let's now add some data to it, and in order 37 00:02:01.444 --> 00:02:04.444 to do that, we use the "set" method. 38 00:02:05.342 --> 00:02:08.759 So question.set, and then we set the key, 39 00:02:10.635 --> 00:02:14.299 in this case I'm first gonna use a string so 40 00:02:14.299 --> 00:02:17.982 that we can specify the question text in here. 41 00:02:17.982 --> 00:02:22.403 So I say question, which is the key, and then the value, 42 00:02:22.403 --> 00:02:26.570 and the question's gonna be "What is the official name 43 00:02:30.633 --> 00:02:33.966 of the latest major JavaScript version?" 44 00:02:38.021 --> 00:02:39.939 All right, and that's it, so this is 45 00:02:39.939 --> 00:02:42.356 the first key of our new map. 46 00:02:43.854 --> 00:02:47.669 So this works a bit like a property in an object, right, 47 00:02:47.669 --> 00:02:49.911 so we could have a question property, 48 00:02:49.911 --> 00:02:52.985 and then assign this string to that property, 49 00:02:52.985 --> 00:02:55.306 so that would be similar, but in maps, 50 00:02:55.306 --> 00:02:59.851 this is how we define a new key-value pair, okay? 51 00:02:59.851 --> 00:03:04.048 And so let's now add some answers to this question, 52 00:03:04.048 --> 00:03:07.441 so question.set, and now I can use, 53 00:03:07.441 --> 00:03:09.158 as I said before, anything in here. 54 00:03:09.158 --> 00:03:11.531 It doesn't have to be a string like an object, 55 00:03:11.531 --> 00:03:15.829 it can be anything, and so I'm simply gonna say "1." 56 00:03:15.829 --> 00:03:19.912 So 1 for the first answer, let's say "ES5," okay? 57 00:03:27.506 --> 00:03:31.673 Okay, and another choice is "ES6," and let's add another one 58 00:03:36.454 --> 00:03:40.011 so that we have multiple choices here. 59 00:03:40.011 --> 00:03:43.844 "ES2015," and a fourth one, "ES7," here we go. 60 00:03:52.842 --> 00:03:56.456 Okay, and now we also need the correct answer 61 00:03:56.456 --> 00:03:59.539 so I'd add that as well, so that set, 62 00:04:00.630 --> 00:04:04.430 and now I say "correct," so we're back to using a string 63 00:04:04.430 --> 00:04:08.928 as a key here, and a correct answer is of course, 64 00:04:08.928 --> 00:04:11.410 and I hope that you know it, number 3. 65 00:04:11.410 --> 00:04:13.158 So this is the official name of 66 00:04:13.158 --> 00:04:15.637 the latest JavaScript version, 67 00:04:15.637 --> 00:04:17.915 actually the major JavaScript version 68 00:04:17.915 --> 00:04:21.982 because ES7 is the most current version, 69 00:04:21.982 --> 00:04:24.943 but that's not the one that everybody uses right now. 70 00:04:24.943 --> 00:04:29.681 Everyone is rather focusing on ES2015 at this point. 71 00:04:29.681 --> 00:04:33.380 All right, and what we can also add here is what happens 72 00:04:33.380 --> 00:04:36.713 if the answer is true, or if it's false. 73 00:04:38.081 --> 00:04:41.147 So let's put another key-value pair here, 74 00:04:41.147 --> 00:04:44.508 and we already used strings as a key, we used numbers, 75 00:04:44.508 --> 00:04:47.903 and now let's use a Boolean, okay? 76 00:04:47.903 --> 00:04:50.470 So if the answer is true, then we want to print to 77 00:04:50.470 --> 00:04:53.137 the console "Correct answer :D," 78 00:04:57.049 --> 00:05:01.216 and if it's the wrong answer, then of course it's false, 79 00:05:02.217 --> 00:05:05.717 and then we say "Wrong, please try again!" 80 00:05:10.248 --> 00:05:12.127 And so I think that with this, 81 00:05:12.127 --> 00:05:14.817 we have everything set up for our question. 82 00:05:14.817 --> 00:05:16.977 Let's now load this and take a look 83 00:05:16.977 --> 00:05:19.560 at our map here in the console. 84 00:05:21.316 --> 00:05:24.078 So question, and here it is, so this is how 85 00:05:24.078 --> 00:05:25.660 a map looks like here in the console. 86 00:05:25.660 --> 00:05:28.577 Let's open this, and so here we go. 87 00:05:29.497 --> 00:05:33.399 Here we have our entries, we can also see the length, 88 00:05:33.399 --> 00:05:35.960 and we see that the prototype of this map 89 00:05:35.960 --> 00:05:38.698 is of course a map, so this is like, 90 00:05:38.698 --> 00:05:40.522 remember like an array for example, 91 00:05:40.522 --> 00:05:42.631 where the prototype is an array, 92 00:05:42.631 --> 00:05:46.798 and so this is a new built in type in ES6, so a map. 93 00:05:48.401 --> 00:05:51.340 And this of course, if we see the prototype chain 94 00:05:51.340 --> 00:05:54.923 is an object and so on and so forth, right? 95 00:05:57.208 --> 00:06:00.791 So just to see how this looks in a console. 96 00:06:01.745 --> 00:06:04.427 Now what if we actually wanted to retrieve data from 97 00:06:04.427 --> 00:06:08.594 this map, what we do is the opposite of set, which is get. 98 00:06:10.647 --> 00:06:14.127 And so what we do is question.get, 99 00:06:14.127 --> 00:06:16.886 and then we simply have to pass in the key, 100 00:06:16.886 --> 00:06:20.136 so let's say that we want the question, 101 00:06:21.622 --> 00:06:23.872 and let's console.log this, 102 00:06:28.738 --> 00:06:31.112 and so we should see the value, and that's it. 103 00:06:31.112 --> 00:06:32.197 So what's the official name of 104 00:06:32.197 --> 00:06:35.197 the latest major JavaScript version? 105 00:06:37.417 --> 00:06:40.213 Okay, and another cool thing that we can do 106 00:06:40.213 --> 00:06:43.054 with maps, that we can't do with object, 107 00:06:43.054 --> 00:06:45.804 is to get the size or the length. 108 00:06:47.192 --> 00:06:51.511 So we can say question.size, and it's not length 109 00:06:51.511 --> 00:06:55.263 like it's with arrays, but in this case it's size. 110 00:06:55.263 --> 00:06:58.096 So let's see, and it gives us "8." 111 00:06:59.565 --> 00:07:01.387 So this works, so one, two, three, 112 00:07:01.387 --> 00:07:04.501 four, five, six, seven and eight. 113 00:07:04.501 --> 00:07:09.210 So we can set data in our map and we can also get data, 114 00:07:09.210 --> 00:07:12.008 but we can also delete data and check 115 00:07:12.008 --> 00:07:16.348 if data is there, or if a certain key is there. 116 00:07:16.348 --> 00:07:19.055 So imagine that we wanted to make this question 117 00:07:19.055 --> 00:07:21.327 a bit easier, and in order to do that, 118 00:07:21.327 --> 00:07:24.584 we would remove one of these choice elements, right, 119 00:07:24.584 --> 00:07:28.170 so instead of having four, we would have only three. 120 00:07:28.170 --> 00:07:30.246 So let's see how that works. 121 00:07:30.246 --> 00:07:32.580 So it's actually very simple, so all we say 122 00:07:32.580 --> 00:07:35.663 is question.delete, and then the key. 123 00:07:39.602 --> 00:07:42.989 In this case we wanna remove the number 4. 124 00:07:42.989 --> 00:07:47.156 All right, let's take a look at it now here in the console, 125 00:07:49.560 --> 00:07:52.643 question, and so yeah, it's not here. 126 00:07:53.986 --> 00:07:56.982 So 1, 2, 3, and 4 is gone. 127 00:07:56.982 --> 00:08:00.162 Now what would happen if we would accidentally run 128 00:08:00.162 --> 00:08:03.645 this line of code here twice, so delete it twice. 129 00:08:03.645 --> 00:08:07.812 Let's duplicate and find out, actually nothing happens. 130 00:08:11.103 --> 00:08:14.020 Let's check it out again, question. 131 00:08:15.499 --> 00:08:18.776 So since it's not there, nothing happens, 132 00:08:18.776 --> 00:08:22.776 but just to be sure we can use the "has" method. 133 00:08:24.446 --> 00:08:28.363 So we can say if question has the key number 4, 134 00:08:31.453 --> 00:08:34.619 then in this case let's delete it, 135 00:08:34.619 --> 00:08:37.786 and actually this would be here, okay? 136 00:08:41.905 --> 00:08:45.884 So we can get, set, delete and also check 137 00:08:45.884 --> 00:08:48.264 if a certain key is in the map. 138 00:08:48.264 --> 00:08:52.347 So if there's a key, number 4, in the question, 139 00:08:52.347 --> 00:08:55.098 then we can delete that element, 140 00:08:55.098 --> 00:08:56.577 and if you decide that you wanna delete 141 00:08:56.577 --> 00:08:58.941 all of the elements at the same time, 142 00:08:58.941 --> 00:09:00.770 then there's also a method for you, 143 00:09:00.770 --> 00:09:03.349 and that one is called "clear." 144 00:09:03.349 --> 00:09:07.266 So let's finally clear everything from our map, 145 00:09:09.424 --> 00:09:12.038 so all we have to do is to use clear. 146 00:09:12.038 --> 00:09:16.803 So if we now load this, and then check out our question, 147 00:09:16.803 --> 00:09:18.321 then you see that it's empty. 148 00:09:18.321 --> 00:09:21.715 So it's no longer there because we cleared everything. 149 00:09:21.715 --> 00:09:23.848 Of course, we don't wanna do that right, 150 00:09:23.848 --> 00:09:26.021 and we also don't want to delete 151 00:09:26.021 --> 00:09:30.304 the question number 4, so let's just take this out, 152 00:09:30.304 --> 00:09:34.137 and log something to the console here instead, 153 00:09:35.037 --> 00:09:38.370 just to see that the "has" method works. 154 00:09:42.688 --> 00:09:46.771 All right, so set, get, has, delete and clear are 155 00:09:48.522 --> 00:09:53.181 the most basic methods that we can use to manipulate maps. 156 00:09:53.181 --> 00:09:55.187 Now something else that's very cool 157 00:09:55.187 --> 00:09:58.349 is that maps are actually iterable, so this means 158 00:09:58.349 --> 00:10:01.256 that we can loop through them, which is another thing 159 00:10:01.256 --> 00:10:04.710 that we cannot do with objects, right? 160 00:10:04.710 --> 00:10:07.881 So the first way of looping through a map 161 00:10:07.881 --> 00:10:11.303 is to use the "forEach" method, and so this means 162 00:10:11.303 --> 00:10:15.470 that each map gets the forEach method such as arrays do, 163 00:10:16.393 --> 00:10:19.394 and all this means is, as you already know, 164 00:10:19.394 --> 00:10:23.780 is that the forEach method is in the prototype property of 165 00:10:23.780 --> 00:10:27.500 the map function constructor, and so all of the maps inherit 166 00:10:27.500 --> 00:10:30.504 that method and can then use it. 167 00:10:30.504 --> 00:10:34.671 So let's try that, and so we say question.forEach. 168 00:10:36.654 --> 00:10:39.210 And such as with arrays, we have access to 169 00:10:39.210 --> 00:10:42.229 the current element, to the current key, 170 00:10:42.229 --> 00:10:44.966 and also to the entire map. 171 00:10:44.966 --> 00:10:47.474 So let's access the value and the key, 172 00:10:47.474 --> 00:10:51.641 and I'm actually gonna call it like that, so value and key, 173 00:10:53.780 --> 00:10:57.501 and let's just log them to the console, okay? 174 00:10:57.501 --> 00:10:59.834 So console.log, this is key, 175 00:11:06.517 --> 00:11:10.350 and it's set to, and of course it's the value. 176 00:11:17.926 --> 00:11:21.112 So let's check this out, and yeah, so here we go. 177 00:11:21.112 --> 00:11:24.501 So all our eight elements here are now printed to 178 00:11:24.501 --> 00:11:27.587 the console, and so this means that we can really 179 00:11:27.587 --> 00:11:31.138 loop through a map, which is really handy. 180 00:11:31.138 --> 00:11:32.951 So we used it for each method, 181 00:11:32.951 --> 00:11:36.599 but we can also loop using the "for-of" loop 182 00:11:36.599 --> 00:11:38.571 that I showed you before with the arrays. 183 00:11:38.571 --> 00:11:41.655 So this kind of loop doesn't only work for arrays, 184 00:11:41.655 --> 00:11:46.404 but also for maps, so let's try that out as well. 185 00:11:46.404 --> 00:11:49.987 So for, and let's say key, and then the of, 186 00:11:54.158 --> 00:11:55.825 so for-of, question. 187 00:11:59.195 --> 00:12:01.336 Now what if we wanted to access not only 188 00:12:01.336 --> 00:12:04.294 the key, but also the value? 189 00:12:04.294 --> 00:12:08.533 In this case we would once again have to use destructuring 190 00:12:08.533 --> 00:12:12.415 and so this is yet another case of the destructuring. 191 00:12:12.415 --> 00:12:15.559 So instead of simply using the questions variable, 192 00:12:15.559 --> 00:12:19.726 like here, like I did here, we use question.entries. 193 00:12:22.231 --> 00:12:25.994 So just like this, and what this does here 194 00:12:25.994 --> 00:12:30.653 is to return all entries of our questions map, 195 00:12:30.653 --> 00:12:34.055 and we can then use destructuring to store the key 196 00:12:34.055 --> 00:12:38.318 and values in two separate values, such as we did before. 197 00:12:38.318 --> 00:12:43.007 So remember, destructuring is using these brackets, 198 00:12:43.007 --> 00:12:45.924 and so we simply say key and value. 199 00:12:48.270 --> 00:12:52.437 So once more, using the entries method here on the question 200 00:12:53.863 --> 00:12:56.086 is gonna return all the key-value pairs, 201 00:12:56.086 --> 00:12:57.979 and we can then use destructuring, 202 00:12:57.979 --> 00:13:00.393 such as we did before with arrays, 203 00:13:00.393 --> 00:13:04.366 and store the keys and the values in two separate variables 204 00:13:04.366 --> 00:13:07.525 that we can then use here inside of this for-of loop. 205 00:13:07.525 --> 00:13:10.275 And actually, this also works for arrays, 206 00:13:10.275 --> 00:13:13.118 so if you're curious about that, you can simply go try 207 00:13:13.118 --> 00:13:17.221 that out and I'm sure that you're going to make it work. 208 00:13:17.221 --> 00:13:19.521 So let's now do the exact same thing here 209 00:13:19.521 --> 00:13:22.188 just to see if it works as well, 210 00:13:23.715 --> 00:13:25.950 so I'm just gonna comment this one out 211 00:13:25.950 --> 00:13:28.000 so that it doesn't get in our way. 212 00:13:28.000 --> 00:13:32.803 So if I reload this now we actually get an error, and that's 213 00:13:32.803 --> 00:13:36.970 because there's one parenthesis here too much, okay? 214 00:13:38.062 --> 00:13:40.692 But now here we go, so everything works 215 00:13:40.692 --> 00:13:43.095 as expected, as it did before. 216 00:13:43.095 --> 00:13:46.363 So let's now, instead of printing all of the elements 217 00:13:46.363 --> 00:13:50.101 in our map, let's use this to only print 218 00:13:50.101 --> 00:13:52.400 our four answers here, okay? 219 00:13:52.400 --> 00:13:54.474 And the way that we do this, is to say 220 00:13:54.474 --> 00:13:59.037 that we only want to print the value if the key is a number. 221 00:13:59.037 --> 00:14:00.983 So that's the beauty of having 222 00:14:00.983 --> 00:14:04.671 this custom data type here for the key. 223 00:14:04.671 --> 00:14:07.821 So remember, in maps, the key cannot only be strings, 224 00:14:07.821 --> 00:14:11.248 but also like numbers or Booleans like down here, 225 00:14:11.248 --> 00:14:14.787 and so we can use that to our advantage right now. 226 00:14:14.787 --> 00:14:18.954 So we can say that if the type of the key is number, 227 00:14:25.526 --> 00:14:27.786 and that's actually that we didn't do before, 228 00:14:27.786 --> 00:14:30.569 so you're still learning a couple of new stuff here 229 00:14:30.569 --> 00:14:32.810 in this section, which is great, right? 230 00:14:32.810 --> 00:14:36.382 So we can use this built-in JavaScript function 231 00:14:36.382 --> 00:14:39.049 to check the type of a variable. 232 00:14:39.946 --> 00:14:42.804 And so in this case we only want to execute 233 00:14:42.804 --> 00:14:46.393 this part of the code here if the key is a number, 234 00:14:46.393 --> 00:14:48.339 and what we wanna do in this case, 235 00:14:48.339 --> 00:14:51.839 is to simply console.log the answer, okay? 236 00:14:53.566 --> 00:14:55.816 So Answer, then number key, 237 00:15:02.956 --> 00:15:06.623 and then of course the value, and that's it. 238 00:15:11.928 --> 00:15:16.377 Okay, and to make our question here look a bit better, 239 00:15:16.377 --> 00:15:18.124 we just wanna get rid of this, 240 00:15:18.124 --> 00:15:21.084 and of this output here, right? 241 00:15:21.084 --> 00:15:24.488 So let's take this out, and this one as well. 242 00:15:24.488 --> 00:15:27.781 This was just for testing purposes before. 243 00:15:27.781 --> 00:15:30.390 So now we have our question and our four 244 00:15:30.390 --> 00:15:33.710 answer possibilities, what we need to do next 245 00:15:33.710 --> 00:15:36.907 is to actually get our answer, and we did that before 246 00:15:36.907 --> 00:15:40.069 in one of the coding challenges, and I'm gonna do it again 247 00:15:40.069 --> 00:15:43.079 right now using the "prompt" function, 248 00:15:43.079 --> 00:15:47.246 which simply opens a pop-up window, and asks for an answer. 249 00:15:49.255 --> 00:15:51.919 And I wanna declare it as a constant and call it "ans" 250 00:15:51.919 --> 00:15:56.086 for answer, and then say prompt, "Write the correct answer." 251 00:16:02.168 --> 00:16:05.352 So here the user can write one, two, three or four. 252 00:16:05.352 --> 00:16:07.674 Now the problem with this is that JavaScript 253 00:16:07.674 --> 00:16:11.069 will then interpret this as a string, so as text, 254 00:16:11.069 --> 00:16:15.695 and so we need to also convert this to a number, 255 00:16:15.695 --> 00:16:18.716 and so we use another built-in JavaScript function 256 00:16:18.716 --> 00:16:20.817 which is called "parseInt," so this 257 00:16:20.817 --> 00:16:24.067 is going to be converted to an integer. 258 00:16:25.533 --> 00:16:28.637 Okay, and so now the answer will be a number. 259 00:16:28.637 --> 00:16:33.478 So as long as the user enters one of the numbers of course. 260 00:16:33.478 --> 00:16:36.530 If the user inputs text, then JavaScript will not be able 261 00:16:36.530 --> 00:16:39.354 to convert it to a number, but we're just gonna suppose 262 00:16:39.354 --> 00:16:41.592 that the user inputs a number here. 263 00:16:41.592 --> 00:16:44.031 Okay, and what do we wanna do next? 264 00:16:44.031 --> 00:16:48.180 We want to display this string here, so "Correct answer :D" 265 00:16:48.180 --> 00:16:50.975 if the answer is true, or this string here, 266 00:16:50.975 --> 00:16:55.627 so "Wrong, please try again!" if the answer is false. 267 00:16:55.627 --> 00:16:57.689 So how can we do that? 268 00:16:57.689 --> 00:17:01.549 We could of course go ahead and write an if-else statement 269 00:17:01.549 --> 00:17:04.082 like we would have to do if we were storing 270 00:17:04.082 --> 00:17:06.675 this data in an object, but we're not, 271 00:17:06.675 --> 00:17:09.888 and so we can use, once again to our advantage, 272 00:17:09.888 --> 00:17:14.237 the fact that we stored these two strings here 273 00:17:14.237 --> 00:17:18.189 with the keys of true and false, so as Booleans. 274 00:17:18.189 --> 00:17:20.458 So all we need to do is to retrieve this string 275 00:17:20.458 --> 00:17:22.653 if the answer is correct, and retrieve 276 00:17:22.653 --> 00:17:25.903 this string if the answer is incorrect. 277 00:17:28.084 --> 00:17:30.441 So the first thing is to compare 278 00:17:30.441 --> 00:17:34.064 the answer with the true answer, right? 279 00:17:34.064 --> 00:17:38.231 So we say question.get('answer'). 280 00:17:39.438 --> 00:17:42.849 And so if the input is the same as the correct answer, 281 00:17:42.849 --> 00:17:46.357 then this expression here will be true, right? 282 00:17:46.357 --> 00:17:48.398 And if it's incorrect then of course it's false, 283 00:17:48.398 --> 00:17:51.317 and now you can see once again the beauty 284 00:17:51.317 --> 00:17:54.009 of using true-false as the keys, 285 00:17:54.009 --> 00:17:58.176 because now all we have to do is to say question.get, 286 00:18:00.334 --> 00:18:03.359 and then use this here as the key, 287 00:18:03.359 --> 00:18:06.077 because this will either be true or false, 288 00:18:06.077 --> 00:18:08.885 and so if it's true it's going to retrieve 289 00:18:08.885 --> 00:18:11.604 the string for true, and if it's false 290 00:18:11.604 --> 00:18:14.235 it's going to retrieve the string for false. 291 00:18:14.235 --> 00:18:16.619 So this is very useful and very handy, 292 00:18:16.619 --> 00:18:19.359 so we don't have to write an if-else statement here, 293 00:18:19.359 --> 00:18:22.661 we can simply do it like this. 294 00:18:22.661 --> 00:18:25.578 Okay, so let's now console.log this 295 00:18:26.656 --> 00:18:30.573 so that we can actually see it as our output. 296 00:18:30.573 --> 00:18:34.784 Okay, so let's load this and input the correct answer. 297 00:18:34.784 --> 00:18:38.151 Let's say 4, and so "Wrong, please try again!" 298 00:18:38.151 --> 00:18:40.071 So yeah, it's working. 299 00:18:40.071 --> 00:18:43.475 Now if I say 3, which is the correct answer, 300 00:18:43.475 --> 00:18:48.091 then we still get "Wrong" here, so something is not working. 301 00:18:48.091 --> 00:18:50.961 Let's see, oh yeah, and that's because 302 00:18:50.961 --> 00:18:54.767 we called it "correct" here, but then "answer" down here. 303 00:18:54.767 --> 00:18:57.600 So of course need to be "correct," 304 00:18:58.511 --> 00:19:01.263 so that we read the correct value. 305 00:19:01.263 --> 00:19:04.456 So let's try it again with number 4, 306 00:19:04.456 --> 00:19:06.615 so it says "Wrong, please try again!" 307 00:19:06.615 --> 00:19:09.576 And now at number 3, which is the correct answer, 308 00:19:09.576 --> 00:19:11.445 and now it says "Correct answer :D," 309 00:19:11.445 --> 00:19:14.347 so yeah, this is really working. 310 00:19:14.347 --> 00:19:17.635 So maybe this part here was a bit tricky, 311 00:19:17.635 --> 00:19:19.886 and a little bit hard to get used to, 312 00:19:19.886 --> 00:19:22.243 but I hope that you really understood it, 313 00:19:22.243 --> 00:19:23.642 and if not then just pause the video, 314 00:19:23.642 --> 00:19:26.435 and take a look at it again. 315 00:19:26.435 --> 00:19:30.063 So now you probably wonder why maps are actually better 316 00:19:30.063 --> 00:19:33.240 than objects to create hash maps, right? 317 00:19:33.240 --> 00:19:35.272 And there are a couple of reasons. 318 00:19:35.272 --> 00:19:38.478 So let's summarize what we learned in this lecture. 319 00:19:38.478 --> 00:19:40.721 So the first reason why they're better is 320 00:19:40.721 --> 00:19:43.913 because we can use anything as keys, which opens 321 00:19:43.913 --> 00:19:47.938 a lot of possibilities as we just saw with this example. 322 00:19:47.938 --> 00:19:51.174 And second, because maps are iterable, 323 00:19:51.174 --> 00:19:53.700 and making it very easy to loop through them 324 00:19:53.700 --> 00:19:56.647 and to manipulate data with them. 325 00:19:56.647 --> 00:19:59.712 And reason number three is because it's really easy 326 00:19:59.712 --> 00:20:02.613 to get the size of a map using the size property, 327 00:20:02.613 --> 00:20:05.323 and that can also be very handy. 328 00:20:05.323 --> 00:20:08.253 And finally, because we can easily add 329 00:20:08.253 --> 00:20:10.349 and remove data from a map. 330 00:20:10.349 --> 00:20:13.989 So all of these are strong arguments in choosing maps 331 00:20:13.989 --> 00:20:18.196 over objects, if we wanna build hash maps. 332 00:20:18.196 --> 00:20:21.384 All right, so I hope that all of this makes perfect sense 333 00:20:21.384 --> 00:20:23.884 to you, and that you start using maps 334 00:20:23.884 --> 00:20:27.154 if you choose to get started with ES6. 335 00:20:27.154 --> 00:20:28.987 Okay, so see you soon.