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.