WEBVTT 1 00:00:01.180 --> 00:00:03.630 Maybe it didn't seem like it 2 00:00:03.630 --> 00:00:08.380 but hoisting is actually a fairly straightforward process. 3 00:00:08.380 --> 00:00:11.500 So let's just go through the different scenarios here 4 00:00:11.500 --> 00:00:13.633 starting with variables. 5 00:00:15.410 --> 00:00:18.190 So let's just create three variables here 6 00:00:18.190 --> 00:00:21.583 using the three different ways of declaring them. 7 00:00:22.570 --> 00:00:26.090 So now let for the job, teacher 8 00:00:28.430 --> 00:00:32.980 and then const for the birth year 9 00:00:32.980 --> 00:00:36.970 let's just call it year 1991. 10 00:00:36.970 --> 00:00:39.170 And now let's try to use 11 00:00:39.170 --> 00:00:40.790 all of these three variables 12 00:00:40.790 --> 00:00:44.373 before declaring them, just to see what happens. 13 00:00:46.790 --> 00:00:51.790 So me, job and year. 14 00:00:56.990 --> 00:00:59.050 So from the rules that we learned 15 00:00:59.050 --> 00:01:00.440 in the previous lecture, 16 00:01:00.440 --> 00:01:02.643 what do you expect will happen now? 17 00:01:04.730 --> 00:01:09.070 Well, the first console dot log result in undefined, 18 00:01:09.070 --> 00:01:11.310 and that's because variables declared 19 00:01:11.310 --> 00:01:14.010 with var are actually hoisted, 20 00:01:14.010 --> 00:01:17.450 but they are hoisted to the value of undefined. 21 00:01:17.450 --> 00:01:20.310 And so therefore when we try to access them 22 00:01:20.310 --> 00:01:24.270 undefined is exactly the result that we get. 23 00:01:24.270 --> 00:01:27.150 And so that's the reason why we see this here. 24 00:01:27.150 --> 00:01:31.620 Then on the contrary we have this let variable, 25 00:01:31.620 --> 00:01:33.660 and so here we see that we cannot 26 00:01:33.660 --> 00:01:36.440 access job before initialization. 27 00:01:36.440 --> 00:01:38.740 And so that's exactly the kind of error 28 00:01:38.740 --> 00:01:41.100 that I showed you in the last slide. 29 00:01:41.100 --> 00:01:42.950 And the origin of this error 30 00:01:42.950 --> 00:01:46.600 is the fact that the job variable is still 31 00:01:46.600 --> 00:01:49.933 in the temporal dead zone here at this point. 32 00:01:51.200 --> 00:01:54.480 Right, so remember that the temporal dead zone 33 00:01:54.480 --> 00:01:58.360 of a variable declared with a let or const, 34 00:01:58.360 --> 00:02:01.450 starts from the beginning of the current scope 35 00:02:01.450 --> 00:02:04.010 and so that's basically here, 36 00:02:04.010 --> 00:02:06.540 so in this case, it's the global scope. 37 00:02:06.540 --> 00:02:08.670 So from the beginning of the scope 38 00:02:08.670 --> 00:02:12.070 until the point of the code where it is defined 39 00:02:12.070 --> 00:02:13.440 and so here. 40 00:02:13.440 --> 00:02:17.260 And this means that at this point of course, 41 00:02:17.260 --> 00:02:21.420 the job variable is still in the temporal dead zone, 42 00:02:21.420 --> 00:02:23.833 and the same is true for year. 43 00:02:25.140 --> 00:02:27.070 And so now we get the same error here 44 00:02:27.070 --> 00:02:29.890 for the year variable as well. 45 00:02:29.890 --> 00:02:34.460 All right, so let's comment out both of these. 46 00:02:34.460 --> 00:02:36.510 Let me just right here 47 00:02:36.510 --> 00:02:38.860 that is hoisting with variables 48 00:02:40.060 --> 00:02:42.493 and now let's try out functions. 49 00:02:45.860 --> 00:02:48.480 So let's create a function declarations 50 00:02:48.480 --> 00:02:50.313 and function expressions here. 51 00:02:51.560 --> 00:02:55.430 So function, and again I will use a simple add 52 00:02:55.430 --> 00:02:57.630 let me just call it, addDecl, 53 00:02:57.630 --> 00:03:00.680 which stands for declaration a, b 54 00:03:03.590 --> 00:03:06.363 and return a plus b, 55 00:03:07.850 --> 00:03:10.091 and now a function expression. 56 00:03:10.091 --> 00:03:14.853 So addExpression, at once more return a plus b. 57 00:03:22.790 --> 00:03:24.960 And now since we're doing these two, 58 00:03:24.960 --> 00:03:27.323 let's also create an arrow. 59 00:03:28.640 --> 00:03:33.640 So addArrow, a, b and return a plus b implicitly. 60 00:03:38.150 --> 00:03:39.830 So I hope you remember 61 00:03:39.830 --> 00:03:42.490 that this is how the arrow function works. 62 00:03:42.490 --> 00:03:43.640 And now once again 63 00:03:43.640 --> 00:03:45.500 let's try to use these functions, 64 00:03:45.500 --> 00:03:47.703 before they are defined. 65 00:03:49.070 --> 00:03:52.270 And so I will log them to the console, 66 00:03:52.270 --> 00:03:54.690 so the result of calling them 67 00:03:54.690 --> 00:03:56.393 because they returned something, 68 00:03:57.440 --> 00:04:00.480 and so we need to log the result to the console 69 00:04:00.480 --> 00:04:01.653 so as you already know. 70 00:04:03.620 --> 00:04:06.150 So let's add two plus three, 71 00:04:06.150 --> 00:04:08.520 and now what do you think will happen? 72 00:04:08.520 --> 00:04:11.210 Do you think that it will be undefined again 73 00:04:11.210 --> 00:04:15.520 just like we have here with the var variable? 74 00:04:15.520 --> 00:04:16.900 Let's see. 75 00:04:16.900 --> 00:04:20.590 And no, we actually get the result of five. 76 00:04:20.590 --> 00:04:22.330 And so indeed we were able 77 00:04:22.330 --> 00:04:24.750 to call the function declaration 78 00:04:24.750 --> 00:04:28.623 before it was actually defined here in the code. 79 00:04:30.130 --> 00:04:33.210 All right, and now let's try the same 80 00:04:33.210 --> 00:04:38.210 for the other two expression and addArrow, 81 00:04:41.250 --> 00:04:43.400 but now I hope that you can already 82 00:04:43.400 --> 00:04:45.940 anticipate what is gonna happen. 83 00:04:45.940 --> 00:04:47.860 And so indeed we get an 84 00:04:47.860 --> 00:04:52.200 cannot access addExpression before initialization. 85 00:04:52.200 --> 00:04:54.400 And so that's exactly the same error 86 00:04:54.400 --> 00:04:56.030 that we got before here 87 00:04:56.030 --> 00:04:59.160 with this let and const variables. 88 00:04:59.160 --> 00:05:01.770 And that's because this function here right now 89 00:05:01.770 --> 00:05:04.230 is simply a const variable too. 90 00:05:04.230 --> 00:05:06.530 And so it means that it's now also 91 00:05:06.530 --> 00:05:08.950 in the temporal dead zone right? 92 00:05:08.950 --> 00:05:11.460 So again we are simply assigning 93 00:05:11.460 --> 00:05:14.670 a function value to this variable. 94 00:05:14.670 --> 00:05:17.990 And since this variable was defined with const, 95 00:05:17.990 --> 00:05:20.130 it is now in a temporal dead zone 96 00:05:20.130 --> 00:05:21.960 and therefore we get this exact 97 00:05:21.960 --> 00:05:24.710 same error message as before. 98 00:05:24.710 --> 00:05:26.180 And the same of course 99 00:05:26.180 --> 00:05:30.210 is gonna happen with the arrow, right? 100 00:05:30.210 --> 00:05:31.860 But now let me show you what happens 101 00:05:31.860 --> 00:05:34.460 when we change these to var. 102 00:05:34.460 --> 00:05:37.573 So do you think that now it will work somehow? 103 00:05:38.560 --> 00:05:40.890 Okay, we still get an error, 104 00:05:40.890 --> 00:05:44.170 but it is another error message here. 105 00:05:44.170 --> 00:05:47.793 So right now addExpression is not a function. 106 00:05:48.800 --> 00:05:49.870 And once again 107 00:05:49.870 --> 00:05:54.110 the same is gonna be happening for the arrow. 108 00:05:54.110 --> 00:05:57.340 Okay, and now let's think about the reason 109 00:05:57.340 --> 00:06:00.150 for this different error message here. 110 00:06:00.150 --> 00:06:03.050 So as you already know, any variables declared 111 00:06:03.050 --> 00:06:07.350 with var will be hoisted and set to undefined. 112 00:06:07.350 --> 00:06:11.680 And now this addExpression here is essentially that, 113 00:06:11.680 --> 00:06:13.830 it's a variable declared with var 114 00:06:13.830 --> 00:06:16.120 and so right now it is undefined. 115 00:06:16.120 --> 00:06:18.141 And then here we are trying 116 00:06:18.141 --> 00:06:21.580 to call undefined basically. 117 00:06:21.580 --> 00:06:26.580 So we are doing essentially this so undefined 118 00:06:27.650 --> 00:06:29.610 and then we are trying to call it. 119 00:06:29.610 --> 00:06:33.313 And so we should not get the exact same error. 120 00:06:34.180 --> 00:06:36.563 So you see it's not a function. 121 00:06:37.410 --> 00:06:39.100 And in fact, let me show it 122 00:06:39.100 --> 00:06:40.493 to you here even better. 123 00:06:41.470 --> 00:06:44.783 So addArrow should now be undefined, 124 00:06:46.883 --> 00:06:49.363 and indeed, here it is. 125 00:06:50.310 --> 00:06:52.100 And once more that is because 126 00:06:52.100 --> 00:06:56.010 we now declared these two here with var. 127 00:06:56.010 --> 00:07:00.504 Okay, so let's simply take both of these out 128 00:07:00.504 --> 00:07:03.110 and for you to keep this as a reference, 129 00:07:03.110 --> 00:07:04.920 I will leave this one as a var 130 00:07:04.920 --> 00:07:07.780 and this as a const, 131 00:07:07.780 --> 00:07:11.890 but just know that both of them will not work. 132 00:07:11.890 --> 00:07:13.680 The only function that you can use 133 00:07:13.680 --> 00:07:18.490 before declaring it, is the add function declaration. 134 00:07:18.490 --> 00:07:21.640 Okay. So now we covered all the rules here 135 00:07:21.640 --> 00:07:23.740 and saw how hoisting works. 136 00:07:23.740 --> 00:07:26.480 But now let's show me a very cool example 137 00:07:26.480 --> 00:07:30.900 which can demonstrate a pitfall of hoisting. 138 00:07:30.900 --> 00:07:34.370 And so it's a mistake that we can easily make 139 00:07:34.370 --> 00:07:35.950 if we're not careful 140 00:07:35.950 --> 00:07:38.080 and at the same time use var, 141 00:07:38.080 --> 00:07:40.320 to declare our variables. 142 00:07:40.320 --> 00:07:43.453 So let's just write example here. 143 00:07:46.030 --> 00:07:49.983 So to start, let's declare a fictional function here, 144 00:07:51.890 --> 00:07:55.400 so a function which is a function declaration, 145 00:07:55.400 --> 00:07:56.670 and that's important. 146 00:07:56.670 --> 00:07:59.000 So a fictional function that will delete 147 00:08:00.200 --> 00:08:01.720 the shopping cart. 148 00:08:01.720 --> 00:08:02.860 So let's say that we have 149 00:08:02.860 --> 00:08:06.003 like an eCommerce website or application. 150 00:08:07.330 --> 00:08:12.330 So let's simply log here, all products deleted. 151 00:08:14.090 --> 00:08:16.580 And so this is a dangerous function 152 00:08:16.580 --> 00:08:20.650 okay, that we should not be calling without care. 153 00:08:20.650 --> 00:08:23.960 Next, let's also declare a variable 154 00:08:23.960 --> 00:08:26.470 which contains the number of products. 155 00:08:26.470 --> 00:08:28.780 And so now I will use a var 156 00:08:28.780 --> 00:08:30.750 and this will then show you once more 157 00:08:30.750 --> 00:08:35.477 why we should not use var products equals 10. 158 00:08:38.600 --> 00:08:40.820 And now here at the top of our code, 159 00:08:40.820 --> 00:08:42.950 we are going to write some logic 160 00:08:42.950 --> 00:08:45.010 which will delete the shopping cart, 161 00:08:45.010 --> 00:08:48.310 whenever the number of products is zero. 162 00:08:48.310 --> 00:08:51.650 Now we already know that zero is a false value 163 00:08:51.650 --> 00:08:55.663 and so we can write this, right? 164 00:08:57.490 --> 00:09:00.703 So in this case, we want to call, 165 00:09:00.703 --> 00:09:03.890 deleteShoppingCart now right? 166 00:09:03.890 --> 00:09:08.890 So again, here we have var numProducts set to 10, 167 00:09:09.000 --> 00:09:10.810 but then here we have this logic 168 00:09:10.810 --> 00:09:12.860 in which we want to write that 169 00:09:12.860 --> 00:09:14.340 when there is no products, 170 00:09:14.340 --> 00:09:17.360 we want to delete the shopping cart. 171 00:09:17.360 --> 00:09:19.993 But now what would actually happens? 172 00:09:21.890 --> 00:09:24.760 So we get all products deleted 173 00:09:24.760 --> 00:09:28.780 even though numProducts is actually 10. 174 00:09:28.780 --> 00:09:30.780 So why did that happen? 175 00:09:30.780 --> 00:09:33.690 Well, it is because of hoisting. 176 00:09:33.690 --> 00:09:36.570 So at this point of the code here, 177 00:09:36.570 --> 00:09:39.210 the numProducts variable is in fact, 178 00:09:39.210 --> 00:09:42.960 not 10 instead, what is it? 179 00:09:42.960 --> 00:09:45.550 Well, it is undefined. 180 00:09:45.550 --> 00:09:47.870 And that's because of the way hoisting works 181 00:09:47.870 --> 00:09:50.120 with var variables. 182 00:09:50.120 --> 00:09:53.830 So we just show that to you very quickly, 183 00:09:53.830 --> 00:09:57.790 and so indeed, now here from line 71, 184 00:09:57.790 --> 00:10:00.380 which is this one, we get this undefined. 185 00:10:00.380 --> 00:10:03.620 And we know that undefined is also a false value, 186 00:10:03.620 --> 00:10:08.620 and so therefore, this code will instill execute 187 00:10:08.790 --> 00:10:12.780 even though we thought that numProducts is 10, 188 00:10:12.780 --> 00:10:14.690 but in fact, it's undefined, 189 00:10:14.690 --> 00:10:17.590 and so that will also trigger the execution 190 00:10:17.590 --> 00:10:19.830 of this if block here. 191 00:10:19.830 --> 00:10:20.770 Now of course, 192 00:10:20.770 --> 00:10:24.010 this is just a fictional tiny example 193 00:10:24.010 --> 00:10:25.610 but in a large code base 194 00:10:25.610 --> 00:10:28.120 with thousands of lines of code 195 00:10:28.120 --> 00:10:29.936 and without best practices, 196 00:10:29.936 --> 00:10:33.010 something like this can totally happen 197 00:10:33.010 --> 00:10:34.460 and it's gonna be a bug, 198 00:10:34.460 --> 00:10:36.600 that will be hard to find. 199 00:10:36.600 --> 00:10:39.860 So what are these best practices? 200 00:10:39.860 --> 00:10:42.360 What is the conclusion of all this? 201 00:10:42.360 --> 00:10:45.667 Well, as a first step, as I told you many times 202 00:10:45.667 --> 00:10:49.690 just don't use var to declare variables. 203 00:10:49.690 --> 00:10:53.350 Use const most of the time to declare variables 204 00:10:53.350 --> 00:10:55.560 and let, if you really need to change 205 00:10:55.560 --> 00:10:57.010 the variable later. 206 00:10:57.010 --> 00:11:00.090 Also in order to write clean code, 207 00:11:00.090 --> 00:11:02.230 you should declare your variables 208 00:11:02.230 --> 00:11:04.360 at the top of each scope. 209 00:11:04.360 --> 00:11:06.110 That will just make your code 210 00:11:06.110 --> 00:11:08.620 at least look a little bit better. 211 00:11:08.620 --> 00:11:11.911 Finally, always declare all your functions first 212 00:11:11.911 --> 00:11:15.140 and use them only after the declaration. 213 00:11:15.140 --> 00:11:17.630 And this applies to all types of functions, 214 00:11:17.630 --> 00:11:20.780 even function declarations, which are hoisted. 215 00:11:20.780 --> 00:11:22.860 So you could use function declarations 216 00:11:22.860 --> 00:11:25.040 before you declare them, 217 00:11:25.040 --> 00:11:28.610 but still just don't do that it's just not clean. 218 00:11:28.610 --> 00:11:30.510 Okay, so what I just told you 219 00:11:30.510 --> 00:11:32.120 are the best practices, 220 00:11:32.120 --> 00:11:35.710 not the rules of how it works in JavaScript. 221 00:11:35.710 --> 00:11:38.080 All right, and now just to finish, 222 00:11:38.080 --> 00:11:40.240 since we're talking about the differences 223 00:11:40.240 --> 00:11:42.970 between let, const and var here, 224 00:11:42.970 --> 00:11:44.560 let's just take two minutes 225 00:11:44.560 --> 00:11:47.623 to see yet another small difference between them. 226 00:11:50.015 --> 00:11:53.710 So let's again declare one variable for each 227 00:11:54.650 --> 00:11:56.993 let y equals two. 228 00:11:59.060 --> 00:12:01.513 So the values don't matter at all here. 229 00:12:02.380 --> 00:12:04.060 And now let's just take a look 230 00:12:04.060 --> 00:12:06.543 at the window object in the console. 231 00:12:09.210 --> 00:12:13.693 Okay, x has been out of course, z here, 232 00:12:15.230 --> 00:12:18.040 and so let's now take a look here 233 00:12:18.040 --> 00:12:22.040 at the window object here in the console. 234 00:12:22.040 --> 00:12:24.570 And window is the global object 235 00:12:24.570 --> 00:12:27.000 of JavaScript in the browser. 236 00:12:27.000 --> 00:12:30.423 And you can see all kinds of stuff in here, 237 00:12:31.680 --> 00:12:33.570 for example, the alert window 238 00:12:33.570 --> 00:12:34.970 that we have used before 239 00:12:36.800 --> 00:12:39.750 or also some other functions 240 00:12:39.750 --> 00:12:43.000 that we probably might have used already before. 241 00:12:43.000 --> 00:12:45.183 So I'm not gonna go into that here, 242 00:12:46.730 --> 00:12:48.113 but what is important, 243 00:12:48.960 --> 00:12:51.550 so let's go all the way to the down here 244 00:12:51.550 --> 00:12:53.990 and you can of course explore this by yourself 245 00:12:53.990 --> 00:12:56.020 in case you're interested in, 246 00:12:56.020 --> 00:12:57.570 but what matters here 247 00:12:57.570 --> 00:12:59.730 is that besides all these functions, 248 00:12:59.730 --> 00:13:03.860 we also get a property of x equals one. 249 00:13:03.860 --> 00:13:05.580 And that's exactly the variable 250 00:13:05.580 --> 00:13:10.193 that we declared right here using the var keyword. 251 00:13:10.193 --> 00:13:14.480 However, we cannot find y or z here 252 00:13:14.480 --> 00:13:16.500 anywhere in this object. 253 00:13:16.500 --> 00:13:18.260 And that's because they were declared 254 00:13:18.260 --> 00:13:20.740 with let or const. 255 00:13:20.740 --> 00:13:23.150 And so variables declared that way 256 00:13:23.150 --> 00:13:26.053 do not create properties on the window object. 257 00:13:26.920 --> 00:13:30.840 So let me actually demonstrate this to you even better. 258 00:13:30.840 --> 00:13:34.280 So we can say or we can test, 259 00:13:34.280 --> 00:13:39.280 x equal, equal, equal window dot x. 260 00:13:40.510 --> 00:13:42.550 So here we are testing if x 261 00:13:42.550 --> 00:13:47.550 is actually a property of the window object. 262 00:13:47.610 --> 00:13:49.300 And so if it is, then of course 263 00:13:49.300 --> 00:13:52.603 x must be the same as window dot x. 264 00:13:53.730 --> 00:13:56.210 And actually it is true. 265 00:13:56.210 --> 00:14:00.203 And now the same for y and z, 266 00:14:08.060 --> 00:14:11.550 and so in these cases, it is both false. 267 00:14:11.550 --> 00:14:15.120 So in conclusion I just wanted to let you know 268 00:14:15.120 --> 00:14:17.540 that variables declared with var, 269 00:14:17.540 --> 00:14:19.070 will create a property 270 00:14:19.070 --> 00:14:21.050 on the global window object. 271 00:14:21.050 --> 00:14:24.950 And that can have some implications in some cases. 272 00:14:24.950 --> 00:14:27.050 And again, you can take some time 273 00:14:27.050 --> 00:14:28.850 to explore the window object 274 00:14:28.850 --> 00:14:30.490 because it's quite interesting to see 275 00:14:30.490 --> 00:14:32.373 everything that is in there. 276 00:14:33.210 --> 00:14:35.210 All right, but with that being said 277 00:14:35.210 --> 00:14:38.180 let's now finally move on to our next topic 278 00:14:38.180 --> 00:14:40.253 which is gonna be the disc keyword.