WEBVTT 1 00:00:01.058 --> 00:00:03.550 Let's start with one of the most simple 2 00:00:03.550 --> 00:00:06.194 and straightforward changes in ES6, 3 00:00:06.194 --> 00:00:09.491 which is the two new ways of declaring variables, 4 00:00:09.491 --> 00:00:12.374 which are gonna replace the var declarations 5 00:00:12.374 --> 00:00:16.541 that we've been using so far, and these are let and const. 6 00:00:18.212 --> 00:00:21.400 So this is the starter project for this section 7 00:00:21.400 --> 00:00:23.676 that you can download from the course 8 00:00:23.676 --> 00:00:26.347 from this section, as always. 9 00:00:26.347 --> 00:00:29.572 So we will continue with our persons examples 10 00:00:29.572 --> 00:00:31.340 throughout this section, 11 00:00:31.340 --> 00:00:33.658 since we're already familiar with these. 12 00:00:33.658 --> 00:00:36.058 And don't worry about these colored boxes here 13 00:00:36.058 --> 00:00:37.225 on the right side. 14 00:00:37.225 --> 00:00:41.156 We're just gonna need them for some examples later on, okay? 15 00:00:41.156 --> 00:00:43.739 So how do we use let and const? 16 00:00:45.030 --> 00:00:48.228 First of all, in all of the lectures during this section, 17 00:00:48.228 --> 00:00:52.007 I will usually start by writing some code in ES5, 18 00:00:52.007 --> 00:00:54.913 and then show you how to do it in ES6, 19 00:00:54.913 --> 00:00:57.278 and where the big differences are. 20 00:00:57.278 --> 00:00:58.695 So let's do that. 21 00:01:00.143 --> 00:01:02.061 Let me just start by writing 22 00:01:02.061 --> 00:01:05.478 that this lecture is about let and const. 23 00:01:07.041 --> 00:01:11.208 Okay, so I'm going to start with the ES5 code, okay? 24 00:01:13.880 --> 00:01:16.366 And let's just say we want to declare a name, 25 00:01:16.366 --> 00:01:18.664 and we've done that a lot of times, 26 00:01:18.664 --> 00:01:22.831 so we already know we use var in ES5 and the name, 27 00:01:23.694 --> 00:01:27.981 and I'll call it name5, because this one is for ES5, 28 00:01:27.981 --> 00:01:30.459 and then later I'm gonna use name6, okay? 29 00:01:30.459 --> 00:01:32.500 Because we cannot duplicate these names, 30 00:01:32.500 --> 00:01:35.833 so we need two different variable names. 31 00:01:36.725 --> 00:01:37.892 So Jane Smith, 32 00:01:42.281 --> 00:01:44.614 and let's say her age is 23, 33 00:01:48.583 --> 00:01:52.250 and we then change that name to Jane Miller. 34 00:01:54.881 --> 00:01:58.303 So imagine that Jane married someone 35 00:01:58.303 --> 00:02:01.107 with the last name of Miller. 36 00:02:01.107 --> 00:02:05.274 So we can simply mutate this name variable here, right? 37 00:02:06.828 --> 00:02:08.995 So let's console.log this, 38 00:02:10.392 --> 00:02:12.627 and you will understand why I'm doing this 39 00:02:12.627 --> 00:02:14.127 in a second, okay? 40 00:02:16.974 --> 00:02:20.542 So let's console.log this and see what happens, 41 00:02:20.542 --> 00:02:23.598 and of course we see Jane Miller here. 42 00:02:23.598 --> 00:02:28.515 Alright, so let's now write the same thing in ES6. 43 00:02:28.515 --> 00:02:30.669 So instead of var, we can now choose 44 00:02:30.669 --> 00:02:32.944 between const and let, 45 00:02:32.944 --> 00:02:34.874 and const is for constants, 46 00:02:34.874 --> 00:02:38.134 which means for values that we don't want to change, 47 00:02:38.134 --> 00:02:40.805 and let is like the old var, 48 00:02:40.805 --> 00:02:42.868 so this is for values that we actually want 49 00:02:42.868 --> 00:02:45.285 to change or mutate later on. 50 00:02:46.180 --> 00:02:48.974 So let's declare the name as a constant, 51 00:02:48.974 --> 00:02:50.641 and so we use const, 52 00:02:52.693 --> 00:02:55.943 name, and I'm calling it name6 for ES6, 53 00:02:57.203 --> 00:03:00.703 and I'm gonna call her, again, Jane Smith, 54 00:03:02.007 --> 00:03:06.691 and now the age, and since we know that the age can change, 55 00:03:06.691 --> 00:03:08.912 we're gonna use let, right? 56 00:03:08.912 --> 00:03:12.337 So now Jane is 23, but next year she's gonna be 24, 57 00:03:12.337 --> 00:03:14.250 25, and so on. 58 00:03:14.250 --> 00:03:18.647 So this is something that can mutate and so we use let. 59 00:03:18.647 --> 00:03:19.647 So age6, 23. 60 00:03:22.049 --> 00:03:22.882 Alright. 61 00:03:24.181 --> 00:03:27.623 Let's now suppose again that Jane wants to marry 62 00:03:27.623 --> 00:03:29.363 and change her name. 63 00:03:29.363 --> 00:03:33.196 So if we now say, name6 should be Jane Miller, 64 00:03:36.689 --> 00:03:40.022 and then console.log the result of that, 65 00:03:42.439 --> 00:03:44.272 such as we did before, 66 00:03:45.373 --> 00:03:48.296 let's see what's gonna happen. 67 00:03:48.296 --> 00:03:50.371 So we get an error here, 68 00:03:50.371 --> 00:03:52.596 assignment to constant variable. 69 00:03:52.596 --> 00:03:54.069 And that makes sense, right? 70 00:03:54.069 --> 00:03:57.623 Because, as I said, this const keyword here is used 71 00:03:57.623 --> 00:04:00.965 to declare constants, so variables that are immutable, 72 00:04:00.965 --> 00:04:04.013 which we cannot change, and if we then attempt 73 00:04:04.013 --> 00:04:06.518 to change the value of a constant, 74 00:04:06.518 --> 00:04:09.348 it gives us this error here. 75 00:04:09.348 --> 00:04:13.493 Okay, so again, in ES6 we no longer use var, 76 00:04:13.493 --> 00:04:16.682 but instead we use const if we have a variable 77 00:04:16.682 --> 00:04:19.547 that's not gonna change its value over time, 78 00:04:19.547 --> 00:04:21.233 and we use let if we want 79 00:04:21.233 --> 00:04:24.708 to change the value of the variable. 80 00:04:24.708 --> 00:04:28.020 So we now have a way to declare constants, 81 00:04:28.020 --> 00:04:32.092 but that's not the only thing that's new with let and const, 82 00:04:32.092 --> 00:04:35.049 and that's because variables declared with var 83 00:04:35.049 --> 00:04:38.889 in ES5 are function-scoped, but variables declared 84 00:04:38.889 --> 00:04:42.933 with let and const in ES6 are block-scoped. 85 00:04:42.933 --> 00:04:43.766 Alright? 86 00:04:43.766 --> 00:04:46.183 So function-scoped and block-scoped, 87 00:04:46.183 --> 00:04:48.531 and that's a huge difference. 88 00:04:48.531 --> 00:04:53.436 So let's see what it actually means with a new example. 89 00:04:53.436 --> 00:04:56.606 So now I'm gonna write a simple driver's-license function, 90 00:04:56.606 --> 00:04:57.439 okay? 91 00:04:57.439 --> 00:05:00.629 So just that we have something different here. 92 00:05:00.629 --> 00:05:03.546 And I'm gonna start again with ES5. 93 00:05:04.833 --> 00:05:07.083 So function driversLicense, 94 00:05:09.905 --> 00:05:11.865 and we are going to do something 95 00:05:11.865 --> 00:05:14.698 if the person passed a test, okay? 96 00:05:18.845 --> 00:05:20.928 So we say, if passedTest, 97 00:05:25.530 --> 00:05:27.863 then the first name is John, 98 00:05:31.645 --> 00:05:34.145 and that's actually not right, 99 00:05:35.749 --> 00:05:38.249 and the year of birth is 1990, 100 00:05:43.389 --> 00:05:47.054 and then we want to console.log this. 101 00:05:47.054 --> 00:05:51.028 Okay, so this may not be the most realistic example, really, 102 00:05:51.028 --> 00:05:53.025 but this is just to show you something, 103 00:05:53.025 --> 00:05:55.843 and you will see in a second when we write the ES6 code. 104 00:05:55.843 --> 00:05:57.814 Okay, so don't worry. 105 00:05:57.814 --> 00:06:01.474 So now let me just console.log this, 106 00:06:01.474 --> 00:06:03.974 firstName, let's say, born in, 107 00:06:09.709 --> 00:06:11.959 and of course, yearOfBirth, 108 00:06:16.275 --> 00:06:19.692 is now officially allowed to drive a car. 109 00:06:30.105 --> 00:06:33.272 So let's call this function, actually, 110 00:06:40.234 --> 00:06:42.542 and we say that the person passed the test, 111 00:06:42.542 --> 00:06:45.488 so we pass true into the function, 112 00:06:45.488 --> 00:06:46.797 and let's see what happens. 113 00:06:46.797 --> 00:06:49.714 Okay, first we, of course, have to comment out this part 114 00:06:49.714 --> 00:06:51.131 of the code here, 115 00:06:53.665 --> 00:06:56.994 so that it doesn't get in our way. 116 00:06:56.994 --> 00:06:58.050 Okay? 117 00:06:58.050 --> 00:07:00.254 And now, of course, it is printed out 118 00:07:00.254 --> 00:07:02.277 to the console just right. 119 00:07:02.277 --> 00:07:06.587 So let's now do the same function for ES6. 120 00:07:06.587 --> 00:07:09.512 Let me just change this here to 5, 121 00:07:09.512 --> 00:07:11.582 and then I'm gonna copy it, 122 00:07:11.582 --> 00:07:13.082 and here's also 5. 123 00:07:17.039 --> 00:07:18.539 ES6, and 6, and 6. 124 00:07:24.547 --> 00:07:25.970 Okay? 125 00:07:25.970 --> 00:07:30.164 Here we can use a let instead of a var, okay? 126 00:07:30.164 --> 00:07:34.268 Because let's assume that the firstName can also change, 127 00:07:34.268 --> 00:07:36.433 so let can be a good change here, 128 00:07:36.433 --> 00:07:39.115 and then for the birth year, of course, 129 00:07:39.115 --> 00:07:40.302 that cannot change, right? 130 00:07:40.302 --> 00:07:42.653 It's impossible that you change your birth year, 131 00:07:42.653 --> 00:07:45.222 so this will be a constant. 132 00:07:45.222 --> 00:07:47.985 And now, of course, if we print it to the console, 133 00:07:47.985 --> 00:07:49.652 it will work, right? 134 00:07:51.329 --> 00:07:54.376 But now it's time to see how let and const are different 135 00:07:54.376 --> 00:07:57.793 from var, so let's change this line here, 136 00:07:59.557 --> 00:08:01.252 where we actually use these variables, 137 00:08:01.252 --> 00:08:05.688 firstName and yearOfBirth, out of the if statement, okay, 138 00:08:05.688 --> 00:08:07.188 and put them here, 139 00:08:08.946 --> 00:08:11.863 and then do the same thing in here. 140 00:08:14.052 --> 00:08:14.885 Alright? 141 00:08:17.364 --> 00:08:19.753 Let's see what happens right now. 142 00:08:19.753 --> 00:08:22.891 Okay, so we get an error here in line 41, 143 00:08:22.891 --> 00:08:24.893 which is this one. 144 00:08:24.893 --> 00:08:26.729 So the first one worked just fine. 145 00:08:26.729 --> 00:08:30.704 This console.log worked because we can use the firstName 146 00:08:30.704 --> 00:08:32.663 and yearOfBirth variables here 147 00:08:32.663 --> 00:08:35.926 in the same driversLicense function, right? 148 00:08:35.926 --> 00:08:38.759 But in here, it's different. 149 00:08:38.759 --> 00:08:42.720 We get an error saying that firstName is not defined, 150 00:08:42.720 --> 00:08:44.833 which is strange, right? 151 00:08:44.833 --> 00:08:47.658 But that's because, with let and const, 152 00:08:47.658 --> 00:08:51.599 the variables are not function-scoped but block-scoped. 153 00:08:51.599 --> 00:08:53.103 So what is a block? 154 00:08:53.103 --> 00:08:56.365 A block is simply all the code that is wrapped 155 00:08:56.365 --> 00:08:58.524 between these curly braces here. 156 00:08:58.524 --> 00:09:01.810 So each time that we have an if statement or a for block 157 00:09:01.810 --> 00:09:05.711 or a while block, we're actually creating a new block, 158 00:09:05.711 --> 00:09:07.365 and the variables declared 159 00:09:07.365 --> 00:09:11.663 with let and const are only valid, are only accessible, 160 00:09:11.663 --> 00:09:15.077 by the code that are inside of the same block. 161 00:09:15.077 --> 00:09:17.341 So if we move outside of the block, 162 00:09:17.341 --> 00:09:20.987 which is what we did here, then we no longer have access 163 00:09:20.987 --> 00:09:23.367 to these variables that are here. 164 00:09:23.367 --> 00:09:25.857 So this is similar to what we had before, 165 00:09:25.857 --> 00:09:27.280 with functions, right? 166 00:09:27.280 --> 00:09:30.397 So with the var keyword, it works differently. 167 00:09:30.397 --> 00:09:33.964 We have access if it's in the same function, right? 168 00:09:33.964 --> 00:09:37.845 If we now moved out this console.log to outside 169 00:09:37.845 --> 00:09:41.856 of the function, then it would also no longer work, 170 00:09:41.856 --> 00:09:44.387 because the variables declared with var, 171 00:09:44.387 --> 00:09:46.202 as we learned throughout this course, 172 00:09:46.202 --> 00:09:49.231 are only accessible inside of a function, 173 00:09:49.231 --> 00:09:50.706 but not from the outside. 174 00:09:50.706 --> 00:09:53.164 So this is not going to work, right? 175 00:09:53.164 --> 00:09:55.582 So we have this error here. 176 00:09:55.582 --> 00:09:57.499 So let's move this back 177 00:09:59.999 --> 00:10:01.582 and come back here. 178 00:10:02.510 --> 00:10:04.429 So this really is a bit different 179 00:10:04.429 --> 00:10:07.799 from what we were used to do up until this point, right? 180 00:10:07.799 --> 00:10:10.847 So again, we now no longer have access 181 00:10:10.847 --> 00:10:14.343 to the variables created inside of a block, 182 00:10:14.343 --> 00:10:16.700 which is this one here in this case, 183 00:10:16.700 --> 00:10:19.585 because these variables are now block-scoped 184 00:10:19.585 --> 00:10:21.800 and no longer function-scoped. 185 00:10:21.800 --> 00:10:24.656 So suppose we wanted to use these variables here, 186 00:10:24.656 --> 00:10:26.066 outside of the block. 187 00:10:26.066 --> 00:10:28.180 Then we would just do it the way that, 188 00:10:28.180 --> 00:10:30.150 before, we did it with functions. 189 00:10:30.150 --> 00:10:33.564 So we can declare these variables outside of the block, 190 00:10:33.564 --> 00:10:36.855 which, before, we did outside of the function, 191 00:10:36.855 --> 00:10:40.003 and then define the variables in here. 192 00:10:40.003 --> 00:10:41.920 So let's say, firstName 193 00:10:45.370 --> 00:10:47.203 and const yearOfBirth. 194 00:10:52.583 --> 00:10:55.041 And so now, in here, we can simply define them, 195 00:10:55.041 --> 00:10:57.113 and then it should work. 196 00:10:57.113 --> 00:10:58.669 Or does it? 197 00:10:58.669 --> 00:11:02.091 Because actually, this also does not work. 198 00:11:02.091 --> 00:11:05.758 It only works for the let, the declarations. 199 00:11:06.695 --> 00:11:10.535 So we simply cannot define a constant here in a block 200 00:11:10.535 --> 00:11:14.049 and then use it outside of that block. 201 00:11:14.049 --> 00:11:17.768 If we really want to use this constant outside of the block, 202 00:11:17.768 --> 00:11:22.318 then we have to declare the constant out here. 203 00:11:22.318 --> 00:11:25.068 Then, of course, it's gonna work. 204 00:11:26.260 --> 00:11:28.931 So, now it works again. 205 00:11:28.931 --> 00:11:31.137 So we declared the firstName variable here, 206 00:11:31.137 --> 00:11:34.284 outside of the block, but didn't define its value, 207 00:11:34.284 --> 00:11:36.814 and then defined it in here, 208 00:11:36.814 --> 00:11:40.674 and that's why we can then use the firstName variable 209 00:11:40.674 --> 00:11:43.153 outside of the block, which is the exact same thing 210 00:11:43.153 --> 00:11:46.424 that we used to do with functions before, right? 211 00:11:46.424 --> 00:11:48.482 So this really is a huge difference 212 00:11:48.482 --> 00:11:52.649 between what we had before, but that's not even all. 213 00:11:54.359 --> 00:11:56.472 Suppose we would use a variable here, 214 00:11:56.472 --> 00:11:59.173 before we actually declare it. 215 00:11:59.173 --> 00:12:03.340 So let's say we say, console.log of the firstName. 216 00:12:06.498 --> 00:12:09.495 So, do you remember what this is going to print out 217 00:12:09.495 --> 00:12:11.028 to the console? 218 00:12:11.028 --> 00:12:13.284 And I really hope that you do. 219 00:12:13.284 --> 00:12:16.282 And, alright, it's undefined, and that's because, 220 00:12:16.282 --> 00:12:19.858 in execution context, all variables are hoisted 221 00:12:19.858 --> 00:12:22.154 and set to undefined, right? 222 00:12:22.154 --> 00:12:24.184 And so if we then use them like this 223 00:12:24.184 --> 00:12:27.160 before we actually declare and define them, 224 00:12:27.160 --> 00:12:28.577 we get undefined. 225 00:12:29.434 --> 00:12:33.865 Now in here, it doesn't work quite like that. 226 00:12:33.865 --> 00:12:37.981 So let's say we wanted to use the firstName variable 227 00:12:37.981 --> 00:12:38.814 in here. 228 00:12:42.236 --> 00:12:44.054 So let's see what that gives us. 229 00:12:44.054 --> 00:12:47.354 And now we get a firstName is not defined error. 230 00:12:47.354 --> 00:12:50.840 So now we can effectively not use a variable 231 00:12:50.840 --> 00:12:53.463 before it was really declared, 232 00:12:53.463 --> 00:12:55.543 and I actually think this is a good thing, 233 00:12:55.543 --> 00:12:59.057 because it may prevent some errors. 234 00:12:59.057 --> 00:13:00.053 Now this happens because 235 00:13:00.053 --> 00:13:02.899 of something called the temporal-dead zone, 236 00:13:02.899 --> 00:13:04.455 which basically just means 237 00:13:04.455 --> 00:13:07.082 that the variables are actually hoisted, 238 00:13:07.082 --> 00:13:10.408 but we still cannot access them before they are declared. 239 00:13:10.408 --> 00:13:12.241 So this is just a technical term, 240 00:13:12.241 --> 00:13:13.801 but what you need to know is 241 00:13:13.801 --> 00:13:15.595 that we can only use a variable 242 00:13:15.595 --> 00:13:19.050 after we actually declare it and defined it. 243 00:13:19.050 --> 00:13:20.820 Okay, and just to finish this, 244 00:13:20.820 --> 00:13:22.363 let's just take a look 245 00:13:22.363 --> 00:13:26.777 at maybe a bit more practical example, alright? 246 00:13:26.777 --> 00:13:31.587 So let's say that, in our code, we were using an i variable, 247 00:13:31.587 --> 00:13:32.420 okay? 248 00:13:32.420 --> 00:13:34.670 So let i be, let's say, 23. 249 00:13:36.016 --> 00:13:38.475 So this was just a normal variable 250 00:13:38.475 --> 00:13:42.170 that we were using in our code, okay? 251 00:13:42.170 --> 00:13:45.587 And now suppose we have a for loop, okay? 252 00:13:47.414 --> 00:13:49.883 And we usually declare a variable in here, 253 00:13:49.883 --> 00:13:52.800 which is a counter called i, right? 254 00:13:54.232 --> 00:13:57.086 So i was the variable that we used all the time, 255 00:13:57.086 --> 00:13:59.253 so let's also use it here. 256 00:14:00.537 --> 00:14:02.620 So we say, i starts at 0, 257 00:14:03.777 --> 00:14:07.027 and this would go on before i equals 5, 258 00:14:07.894 --> 00:14:11.043 so as long as i is less than 5, 259 00:14:11.043 --> 00:14:12.914 and then i should be incremented. 260 00:14:12.914 --> 00:14:16.414 So this is all nothing new for you, right? 261 00:14:17.597 --> 00:14:21.180 And then we just console.log all of the is. 262 00:14:23.265 --> 00:14:24.116 Okay. 263 00:14:24.116 --> 00:14:27.949 Now, for that, we also console.log i out here, 264 00:14:30.052 --> 00:14:34.177 remember, which is the variable that we had up here. 265 00:14:34.177 --> 00:14:35.010 Alright? 266 00:14:36.043 --> 00:14:38.217 And before we can run this, 267 00:14:38.217 --> 00:14:40.967 let me just get rid of this line, 268 00:14:41.845 --> 00:14:45.392 so that we don't have that error, 269 00:14:45.392 --> 00:14:47.351 and so, let's see. 270 00:14:47.351 --> 00:14:50.663 Okay, so we have 0, 1, 2, 3, 4, 271 00:14:50.663 --> 00:14:52.541 which are these console.logs, 272 00:14:52.541 --> 00:14:53.958 and then i is 23. 273 00:14:56.198 --> 00:15:00.218 So assigning other values to i in here, 274 00:15:00.218 --> 00:15:01.379 in this for loop, 275 00:15:01.379 --> 00:15:05.187 doesn't change the i variable that we had defined here, 276 00:15:05.187 --> 00:15:06.438 with a let. 277 00:15:06.438 --> 00:15:10.301 And again, that's because these variables are block-scoped. 278 00:15:10.301 --> 00:15:13.311 And so this i variable here is a completely different 279 00:15:13.311 --> 00:15:15.819 variable from this one, so they happen 280 00:15:15.819 --> 00:15:18.492 to have the same name, but it really doesn't matter, 281 00:15:18.492 --> 00:15:21.285 because they are separate variables. 282 00:15:21.285 --> 00:15:24.434 It's like having var i inside of a function 283 00:15:24.434 --> 00:15:26.736 and var i outside of a function, 284 00:15:26.736 --> 00:15:30.066 so these would be also two completely different variables, 285 00:15:30.066 --> 00:15:31.003 right? 286 00:15:31.003 --> 00:15:33.897 And now, here with the block, in ES6, 287 00:15:33.897 --> 00:15:35.815 it's exactly what happens as well. 288 00:15:35.815 --> 00:15:38.782 So i, here, is a completely different variable 289 00:15:38.782 --> 00:15:42.660 in this block, than this i here in this other, 290 00:15:42.660 --> 00:15:44.531 let's say, block. 291 00:15:44.531 --> 00:15:46.614 So if we had var instead, 292 00:15:48.473 --> 00:15:51.175 let's just very quickly test this out, 293 00:15:51.175 --> 00:15:53.592 what do you think would i be? 294 00:15:56.213 --> 00:15:58.298 And that's right, it would be 5, 295 00:15:58.298 --> 00:16:01.799 because these variables, of course, are not block-scoped. 296 00:16:01.799 --> 00:16:05.012 So this is now not a different variable, 297 00:16:05.012 --> 00:16:07.979 and so this 23 here will be overwritten, 298 00:16:07.979 --> 00:16:08.972 and in the end, 299 00:16:08.972 --> 00:16:12.896 we have the final i from this counter variable here. 300 00:16:12.896 --> 00:16:15.180 So, I really hope this makes sense, 301 00:16:15.180 --> 00:16:17.609 and that you understood the main differences 302 00:16:17.609 --> 00:16:20.442 between var, const, and let, okay? 303 00:16:21.641 --> 00:16:24.192 So, as a conclusion of this lecture, 304 00:16:24.192 --> 00:16:26.415 if you want to start using ES6, 305 00:16:26.415 --> 00:16:28.142 then the best practice is actually 306 00:16:28.142 --> 00:16:32.319 to use let for variables that will change the value 307 00:16:32.319 --> 00:16:34.604 over time, and const for variables 308 00:16:34.604 --> 00:16:36.564 that cannot be reassigned, 309 00:16:36.564 --> 00:16:39.981 so that are constant throughout our code.