WEBVTT 1 00:00:01.250 --> 00:00:04.570 Now it's time to see scoping in action 2 00:00:04.570 --> 00:00:07.450 in a semi complex example, 3 00:00:07.450 --> 00:00:09.260 to make sure that you really get 4 00:00:09.260 --> 00:00:11.473 the super important concept. 5 00:00:13.060 --> 00:00:14.350 And as always, 6 00:00:14.350 --> 00:00:18.500 let's start by opening up a new VS Code window 7 00:00:18.500 --> 00:00:20.203 with (mumbles) starter files. 8 00:00:23.010 --> 00:00:25.343 So that's already here at my desktop. 9 00:00:28.170 --> 00:00:29.003 And again, 10 00:00:29.003 --> 00:00:30.963 I have the prettier configuration here. 11 00:00:32.000 --> 00:00:34.533 The index is not really important here. 12 00:00:36.120 --> 00:00:37.890 And so let's just start writing 13 00:00:37.890 --> 00:00:39.910 some JavaScript code here. 14 00:00:39.910 --> 00:00:41.910 And I'm gonna start by writing a 15 00:00:41.910 --> 00:00:44.000 simple calcAge function. 16 00:00:44.000 --> 00:00:47.270 And this time let's actually use a function declaration. 17 00:00:47.270 --> 00:00:49.100 Not that it matters. 18 00:00:49.100 --> 00:00:51.160 But just to have some diversity, 19 00:00:51.160 --> 00:00:54.033 and not always create the same type of function. 20 00:00:55.477 --> 00:00:56.750 So calcAge, 21 00:00:56.750 --> 00:00:59.063 which is gonna receive a birth year. 22 00:01:03.780 --> 00:01:05.680 And then all this function does 23 00:01:05.680 --> 00:01:07.393 is to calculate an age. 24 00:01:08.400 --> 00:01:11.310 And so this is nothing new at this point. 25 00:01:11.310 --> 00:01:12.863 So the current year, 26 00:01:13.800 --> 00:01:17.063 minus the birth year. 27 00:01:17.910 --> 00:01:19.280 Then let's also 28 00:01:21.070 --> 00:01:23.133 return that age here. 29 00:01:24.220 --> 00:01:26.780 And so this calcAge function here is, 30 00:01:26.780 --> 00:01:28.730 as we learned in the last lecture, 31 00:01:28.730 --> 00:01:30.870 defined in a global scope. 32 00:01:30.870 --> 00:01:32.240 And that's because it is 33 00:01:32.240 --> 00:01:35.200 here in the top level code, right? 34 00:01:35.200 --> 00:01:39.010 Also, this function here creates its own scope. 35 00:01:39.010 --> 00:01:41.470 And that scope is gonna be equivalent 36 00:01:41.470 --> 00:01:43.300 to the variable environment 37 00:01:43.300 --> 00:01:45.720 of its execution context. 38 00:01:45.720 --> 00:01:47.430 So that's all the stuff we learned 39 00:01:47.430 --> 00:01:50.480 over the past couple of lectures. 40 00:01:50.480 --> 00:01:53.993 And now let's create a global variable here. 41 00:01:55.630 --> 00:01:57.580 So I'm gonna call that one 42 00:01:57.580 --> 00:01:59.403 first, name. 43 00:02:02.060 --> 00:02:04.770 And now let's actually call the function 44 00:02:06.290 --> 00:02:07.483 so calcAge, 45 00:02:09.240 --> 00:02:11.410 with 1991. 46 00:02:11.410 --> 00:02:14.550 And then here inside of this calcAge function, 47 00:02:14.550 --> 00:02:17.063 I will log first name to the console. 48 00:02:20.660 --> 00:02:23.180 So first name. 49 00:02:23.180 --> 00:02:24.140 Now as you see, 50 00:02:24.140 --> 00:02:27.760 this first name variable is not actually in this scope 51 00:02:27.760 --> 00:02:29.770 of the calcAge function. 52 00:02:29.770 --> 00:02:32.230 However, it is a global variable 53 00:02:32.230 --> 00:02:34.100 that we defined out here. 54 00:02:34.100 --> 00:02:35.110 And so therefore, 55 00:02:35.110 --> 00:02:36.290 through the scope chain, 56 00:02:36.290 --> 00:02:38.110 it's gonna be made available 57 00:02:38.110 --> 00:02:40.430 also inside of this scope. 58 00:02:40.430 --> 00:02:42.533 So inside of this function, right? 59 00:02:43.430 --> 00:02:46.293 So let's just execute this code here, 60 00:02:47.270 --> 00:02:49.630 just to see that it actually works. 61 00:02:49.630 --> 00:02:52.510 And then we're gonna explain a little bit more. 62 00:02:52.510 --> 00:02:54.853 So live server. 63 00:02:58.400 --> 00:03:00.510 And so here we go. 64 00:03:00.510 --> 00:03:02.423 Let's open up the console. 65 00:03:07.880 --> 00:03:10.053 Let's reload to get rid of this error. 66 00:03:10.949 --> 00:03:11.782 And okay. 67 00:03:13.210 --> 00:03:14.990 So you see that indeed, 68 00:03:14.990 --> 00:03:17.320 Jonas here was printed to the console, 69 00:03:17.320 --> 00:03:19.840 which is the first name variable. 70 00:03:19.840 --> 00:03:23.170 And so when this line of code here was executed, 71 00:03:23.170 --> 00:03:26.950 JavaScript did not find this variable in the scope. 72 00:03:26.950 --> 00:03:29.380 And so it did a variable lookup, 73 00:03:29.380 --> 00:03:31.500 where it looked up in the scope chain 74 00:03:31.500 --> 00:03:34.150 to see if it found the variable there. 75 00:03:34.150 --> 00:03:36.050 And indeed, the parent scope 76 00:03:36.050 --> 00:03:38.980 of the calcAge function is the global scope. 77 00:03:38.980 --> 00:03:41.530 And the first name variable is in there, 78 00:03:41.530 --> 00:03:44.690 and therefore JavaScript could then use that. 79 00:03:44.690 --> 00:03:45.830 Now here, if we tried, 80 00:03:45.830 --> 00:03:48.070 for example just name, 81 00:03:48.070 --> 00:03:50.570 then JavaScript would also do a lookup, 82 00:03:50.570 --> 00:03:53.630 but it would not find this variable in the global scope. 83 00:03:53.630 --> 00:03:56.250 And therefore, we would get an error. 84 00:03:56.250 --> 00:03:57.310 Now with this variable, 85 00:03:57.310 --> 00:03:59.350 actually we would get no error. 86 00:03:59.350 --> 00:04:01.000 As I explained to you in the beginning, 87 00:04:01.000 --> 00:04:02.390 this is kind of a special 88 00:04:02.390 --> 00:04:04.850 variable name that we should not use. 89 00:04:04.850 --> 00:04:07.560 So let's say I used last name. 90 00:04:07.560 --> 00:04:09.360 And so again, this variable 91 00:04:09.360 --> 00:04:11.150 is nowhere to be found. 92 00:04:11.150 --> 00:04:12.910 So even by doing a look up 93 00:04:12.910 --> 00:04:14.400 into the parent scope, 94 00:04:14.400 --> 00:04:15.953 and so now when I saved this, 95 00:04:17.040 --> 00:04:20.623 then I get this last name is not define error. 96 00:04:21.500 --> 00:04:22.670 Okay? 97 00:04:22.670 --> 00:04:25.053 And so going back here to first name, 98 00:04:26.090 --> 00:04:27.200 then of course, 99 00:04:27.200 --> 00:04:29.120 everything works just the same. 100 00:04:29.120 --> 00:04:30.060 And that is true, 101 00:04:30.060 --> 00:04:31.980 even though this variable here 102 00:04:31.980 --> 00:04:36.080 was actually defined after the calcAge function. 103 00:04:36.080 --> 00:04:37.930 But that's not a problem at all. 104 00:04:37.930 --> 00:04:41.160 Because remember that the code in the function 105 00:04:41.160 --> 00:04:44.730 is only executed once it's actually called. 106 00:04:44.730 --> 00:04:46.840 And so that happens after 107 00:04:46.840 --> 00:04:50.080 the declaration of the first name variable. 108 00:04:50.080 --> 00:04:51.640 So right here. 109 00:04:51.640 --> 00:04:53.430 And so at this point in the code, 110 00:04:53.430 --> 00:04:55.700 the first name variable is already 111 00:04:55.700 --> 00:04:58.880 in the global execution variable environment. 112 00:04:58.880 --> 00:05:02.470 So in the global scope, ready to be used. 113 00:05:02.470 --> 00:05:06.470 Okay, but let's actually get rid of this here. 114 00:05:06.470 --> 00:05:10.563 And let's create another function inside of this function. 115 00:05:11.660 --> 00:05:15.123 So function, printAge 116 00:05:15.123 --> 00:05:18.380 and this will print a nice string to the console. 117 00:05:18.380 --> 00:05:21.040 And as you also know already, 118 00:05:21.040 --> 00:05:23.350 it also creates a new scope. 119 00:05:23.350 --> 00:05:25.650 And let's create an output variable, 120 00:05:25.650 --> 00:05:27.480 which is gonna be the string 121 00:05:27.480 --> 00:05:28.793 that we will build here. 122 00:05:30.040 --> 00:05:33.083 So output equals, 123 00:05:34.280 --> 00:05:35.280 you are 124 00:05:37.050 --> 00:05:38.570 the age, 125 00:05:38.570 --> 00:05:40.800 and I forgot the curly braces 126 00:05:41.870 --> 00:05:43.400 born in 127 00:05:46.990 --> 00:05:47.863 birth year. 128 00:05:49.470 --> 00:05:54.150 And then we simply log that message to the console. 129 00:05:54.150 --> 00:05:56.530 And now to actually see this result here, 130 00:05:56.530 --> 00:05:59.380 we need to, of course, call the function. 131 00:05:59.380 --> 00:06:00.853 So let's do that right here. 132 00:06:02.070 --> 00:06:02.903 So printAge. 133 00:06:05.100 --> 00:06:07.850 And now we get a string with all the data 134 00:06:07.850 --> 00:06:09.930 that we actually computed, 135 00:06:09.930 --> 00:06:11.530 and it works just fine. 136 00:06:11.530 --> 00:06:14.110 So we get the age that was calculated here, 137 00:06:14.110 --> 00:06:15.590 and also the birth year 138 00:06:15.590 --> 00:06:18.150 that was passed into this function. 139 00:06:18.150 --> 00:06:19.190 And so here again, 140 00:06:19.190 --> 00:06:22.900 we see the magic of the scope chain in action. 141 00:06:22.900 --> 00:06:24.370 So once again, 142 00:06:24.370 --> 00:06:28.260 the engine as it is executing this printAge function 143 00:06:28.260 --> 00:06:29.670 is trying to access 144 00:06:29.670 --> 00:06:32.270 or is trying to find the age variable 145 00:06:32.270 --> 00:06:33.670 in the current scope, 146 00:06:33.670 --> 00:06:35.890 however it cannot find it there. 147 00:06:35.890 --> 00:06:36.723 And so therefore, 148 00:06:36.723 --> 00:06:38.400 it goes to the parent scope, 149 00:06:38.400 --> 00:06:40.200 where it will then find 150 00:06:40.200 --> 00:06:42.120 this age variable of course, 151 00:06:42.120 --> 00:06:43.283 that we created here. 152 00:06:44.172 --> 00:06:47.210 And the same is true for the birth year variable, 153 00:06:47.210 --> 00:06:48.770 because for scoping 154 00:06:48.770 --> 00:06:50.410 the parameter of a function 155 00:06:50.410 --> 00:06:53.620 work just like normal variables. 156 00:06:53.620 --> 00:06:55.770 And also remember that we said 157 00:06:55.770 --> 00:06:58.030 that the scope of a variable 158 00:06:58.030 --> 00:06:59.810 is the entire region of the code 159 00:06:59.810 --> 00:07:02.660 in which the variable is accessible. 160 00:07:02.660 --> 00:07:03.780 So for example, 161 00:07:03.780 --> 00:07:05.907 the scope of the age variable 162 00:07:05.907 --> 00:07:08.480 is all of this area here. 163 00:07:08.480 --> 00:07:09.884 So everywhere here, 164 00:07:09.884 --> 00:07:11.950 the age variable is accessible. 165 00:07:13.270 --> 00:07:14.103 So of course, 166 00:07:14.103 --> 00:07:16.610 in the calcAge function, where it was defined, 167 00:07:16.610 --> 00:07:19.630 and then also in all the child scopes, 168 00:07:19.630 --> 00:07:22.010 so all the inner scopes, okay? 169 00:07:22.010 --> 00:07:25.410 But of course, age is not accessible outside 170 00:07:25.410 --> 00:07:27.750 of the calcAge scope. 171 00:07:27.750 --> 00:07:29.843 So let me demonstrate that here. 172 00:07:31.640 --> 00:07:33.570 So here, we will not be able 173 00:07:33.570 --> 00:07:35.800 to access the age variable. 174 00:07:35.800 --> 00:07:38.550 And that is because as I mentioned, 175 00:07:38.550 --> 00:07:41.440 the scope chain is a one way street. 176 00:07:41.440 --> 00:07:43.050 So only an inner scope 177 00:07:43.050 --> 00:07:46.570 can have access to the variables of its outer scope, 178 00:07:46.570 --> 00:07:48.250 but not the other way around. 179 00:07:48.250 --> 00:07:50.460 So now here we are in the outer scope, 180 00:07:50.460 --> 00:07:53.850 and we cannot have access to the variables 181 00:07:53.850 --> 00:07:55.530 of a child scope, 182 00:07:55.530 --> 00:07:58.370 which the scope of the calcAge function here 183 00:07:59.690 --> 00:08:01.800 surely is, okay? 184 00:08:01.800 --> 00:08:04.160 And the same goes for functions again. 185 00:08:04.160 --> 00:08:07.920 And so we cannot call the printAge function out here, 186 00:08:07.920 --> 00:08:09.363 for the same reason. 187 00:08:10.930 --> 00:08:12.863 Let's comment out this one. 188 00:08:14.070 --> 00:08:17.063 And so now we get printAge is not defined. 189 00:08:18.150 --> 00:08:18.983 Okay? 190 00:08:18.983 --> 00:08:21.140 So here in the global scope, 191 00:08:21.140 --> 00:08:24.860 we do not have access to any variables defined 192 00:08:24.860 --> 00:08:26.293 in any other scope. 193 00:08:28.070 --> 00:08:29.530 Now, all right? 194 00:08:29.530 --> 00:08:32.840 And here, let's actually take it to the next level, 195 00:08:32.840 --> 00:08:36.023 and also include the name of the person. 196 00:08:37.080 --> 00:08:39.573 So let's say, first name. 197 00:08:41.030 --> 00:08:43.280 And let's try this now. 198 00:08:43.280 --> 00:08:45.560 And indeed, it does have access 199 00:08:45.560 --> 00:08:47.520 to the first name variable. 200 00:08:47.520 --> 00:08:48.353 And so here, 201 00:08:48.353 --> 00:08:50.730 the engine is doing an even bigger, 202 00:08:50.730 --> 00:08:52.903 or a longer variable lookup. 203 00:08:53.940 --> 00:08:56.200 So right now, we are of course, 204 00:08:56.200 --> 00:08:58.540 in the printAge scope here. 205 00:08:58.540 --> 00:09:01.550 And so then JavaScript cannot find a variable 206 00:09:01.550 --> 00:09:02.780 in the current scope. 207 00:09:02.780 --> 00:09:04.970 So it looks up in the scope chain, 208 00:09:04.970 --> 00:09:07.400 which is then the next step, 209 00:09:07.400 --> 00:09:08.970 the calcAge function. 210 00:09:08.970 --> 00:09:13.110 However, it can also not find first name in this scope, 211 00:09:13.110 --> 00:09:15.600 and therefore it goes up even further 212 00:09:15.600 --> 00:09:17.130 into the global scope. 213 00:09:17.130 --> 00:09:18.720 And there it is. 214 00:09:18.720 --> 00:09:20.170 And so this is the value 215 00:09:20.170 --> 00:09:21.423 that is gonna be used. 216 00:09:22.300 --> 00:09:24.430 Okay, so I hope 217 00:09:24.430 --> 00:09:27.230 all of this made sense until this point. 218 00:09:27.230 --> 00:09:28.630 Let's now go further 219 00:09:28.630 --> 00:09:30.750 and also create a block scope 220 00:09:30.750 --> 00:09:33.600 right here in this printAge function. 221 00:09:33.600 --> 00:09:36.193 So let's do an if statement here. 222 00:09:37.060 --> 00:09:39.390 And we will check if the person 223 00:09:39.390 --> 00:09:42.190 based on the birth year is a millennial. 224 00:09:42.190 --> 00:09:44.120 And so that is if you were born 225 00:09:44.120 --> 00:09:47.450 between 1981 and 1996. 226 00:09:47.450 --> 00:09:48.950 Then you're a millennial, 227 00:09:48.950 --> 00:09:50.350 and so let's check for that. 228 00:09:51.430 --> 00:09:54.220 So birth year needs to be 229 00:09:54.220 --> 00:09:56.080 at least 1981 230 00:09:58.760 --> 00:09:59.803 and below, 231 00:10:02.210 --> 00:10:04.003 below 1996. 232 00:10:06.994 --> 00:10:09.110 And so here we are creating a block. 233 00:10:09.110 --> 00:10:13.370 And therefore, this will be a new block scope. 234 00:10:13.370 --> 00:10:14.730 And so let's now 235 00:10:14.730 --> 00:10:17.663 define a variable here using const. 236 00:10:19.150 --> 00:10:21.030 And I'm gonna call it string. 237 00:10:21.030 --> 00:10:21.863 And let's say, 238 00:10:23.160 --> 00:10:26.300 so first we get this string here to the console. 239 00:10:26.300 --> 00:10:27.890 And then we can also say, 240 00:10:27.890 --> 00:10:29.500 so if the person is a millennial, 241 00:10:29.500 --> 00:10:30.530 we will say, 242 00:10:30.530 --> 00:10:34.460 oh, and you're a millennial. 243 00:10:36.830 --> 00:10:38.633 And then again, the first name. 244 00:10:40.240 --> 00:10:41.610 And so now we are adding 245 00:10:41.610 --> 00:10:43.180 even one more step here 246 00:10:43.180 --> 00:10:44.660 to the scope chain, 247 00:10:44.660 --> 00:10:48.000 because now the look up for first name 248 00:10:48.000 --> 00:10:50.010 is even longer. 249 00:10:50.010 --> 00:10:51.723 But it still will work. 250 00:10:53.320 --> 00:10:55.713 So lemme log that to the console. 251 00:10:59.220 --> 00:11:00.700 And so in this case, 252 00:11:00.700 --> 00:11:03.560 I am clearly a millennial, okay? 253 00:11:03.560 --> 00:11:06.920 And again, Jonas here is still found 254 00:11:06.920 --> 00:11:07.820 all the way here 255 00:11:07.820 --> 00:11:09.433 from the outer scope. 256 00:11:10.550 --> 00:11:12.790 But now, what do you think will happen 257 00:11:12.790 --> 00:11:15.490 as we try to log this variable 258 00:11:15.490 --> 00:11:18.230 outside of this block scope? 259 00:11:18.230 --> 00:11:19.780 So basically do the same, 260 00:11:19.780 --> 00:11:21.963 but outside of the block. 261 00:11:23.590 --> 00:11:28.590 So indeed, we get an error that str is not defined. 262 00:11:28.780 --> 00:11:32.500 And again, that's because const and let variables 263 00:11:32.500 --> 00:11:34.210 are block scoped. 264 00:11:34.210 --> 00:11:35.620 So they are valid. 265 00:11:35.620 --> 00:11:39.130 So they are available only inside the block 266 00:11:39.130 --> 00:11:40.573 in which they were created. 267 00:11:41.870 --> 00:11:45.560 But now watch as we create yet another variable, 268 00:11:45.560 --> 00:11:47.283 which I will call millennial. 269 00:11:50.020 --> 00:11:51.683 And let's set it to true. 270 00:11:52.960 --> 00:11:56.560 And so this is an old pre ES6 variable. 271 00:11:56.560 --> 00:11:59.530 And so what do you think will happen, 272 00:11:59.530 --> 00:12:02.903 as we log it, also here outside of this block? 273 00:12:05.170 --> 00:12:06.920 So we need to comment out this one. 274 00:12:08.230 --> 00:12:12.010 So again, what do you think is gonna happen now? 275 00:12:12.010 --> 00:12:15.620 And JavaScript can actually find it. 276 00:12:15.620 --> 00:12:17.650 And so that is because of the fact 277 00:12:17.650 --> 00:12:19.830 that var variables, 278 00:12:19.830 --> 00:12:22.660 so variables declared with the var keyword 279 00:12:22.660 --> 00:12:24.420 are function scoped. 280 00:12:24.420 --> 00:12:26.480 So they simply ignore the block, 281 00:12:26.480 --> 00:12:29.180 because they are not block scoped at all. 282 00:12:29.180 --> 00:12:30.910 They're just function scoped. 283 00:12:30.910 --> 00:12:33.373 And so here, we are still in the same function. 284 00:12:34.310 --> 00:12:35.250 So here, 285 00:12:35.250 --> 00:12:37.330 here we are trying to access the variable 286 00:12:37.330 --> 00:12:41.990 that was defined in the same function, right? 287 00:12:41.990 --> 00:12:42.890 So right now, 288 00:12:42.890 --> 00:12:45.070 the scope of the millennial variable 289 00:12:45.070 --> 00:12:47.120 is this entire function, 290 00:12:47.120 --> 00:12:51.050 no matter if it was declared inside of a block or not. 291 00:12:51.050 --> 00:12:54.470 Because again, var variables do not care 292 00:12:54.470 --> 00:12:56.110 about blocks at all. 293 00:12:56.110 --> 00:12:57.090 And so therefore, 294 00:12:57.090 --> 00:12:59.950 we can then access the millennial variable 295 00:12:59.950 --> 00:13:01.890 inside of its scope. 296 00:13:01.890 --> 00:13:02.860 Okay? 297 00:13:02.860 --> 00:13:05.400 So keep that in mind as you use, 298 00:13:05.400 --> 00:13:08.200 or as you see a variable declared 299 00:13:08.200 --> 00:13:10.250 with var, right? 300 00:13:10.250 --> 00:13:12.290 Because, as I said, 301 00:13:12.290 --> 00:13:14.610 on your own, you should probably not use 302 00:13:14.610 --> 00:13:16.370 this variable yourself, 303 00:13:16.370 --> 00:13:19.210 always just use const, or let. 304 00:13:19.210 --> 00:13:21.740 But if you are reading other code bases, 305 00:13:21.740 --> 00:13:24.120 or even working with older code, 306 00:13:24.120 --> 00:13:25.660 then keep in mind 307 00:13:25.660 --> 00:13:28.660 that this is how the var variable works. 308 00:13:28.660 --> 00:13:30.490 And so that's why it's very important 309 00:13:30.490 --> 00:13:33.820 to learn about str as well. 310 00:13:33.820 --> 00:13:35.410 Okay, next up, 311 00:13:35.410 --> 00:13:39.160 let's prove that functions are also in fact, 312 00:13:39.160 --> 00:13:41.733 block scoped starting in ES6. 313 00:13:43.490 --> 00:13:45.080 So let's just create a simple 314 00:13:46.440 --> 00:13:48.763 function here, that will add two values. 315 00:13:52.730 --> 00:13:55.253 Return A plus B. 316 00:13:56.440 --> 00:13:58.020 And then let's 317 00:13:59.410 --> 00:14:02.273 attempt to call it here outside of the block. 318 00:14:04.720 --> 00:14:07.293 So add two and three. 319 00:14:08.960 --> 00:14:12.290 And now we get add is not defined. 320 00:14:12.290 --> 00:14:14.060 And so in fact, 321 00:14:14.060 --> 00:14:17.120 the scope of this add function here 322 00:14:17.120 --> 00:14:20.380 is only the block in which it was defined. 323 00:14:20.380 --> 00:14:21.310 So only here, 324 00:14:21.310 --> 00:14:23.300 we can use the add function. 325 00:14:23.300 --> 00:14:25.210 And so that proves that 326 00:14:25.210 --> 00:14:28.230 functions are now in fact, block scoped. 327 00:14:28.230 --> 00:14:32.120 But remember that that is only true for strict mode. 328 00:14:32.120 --> 00:14:33.060 And so that's the mode 329 00:14:33.060 --> 00:14:34.890 that we're actually currently in. 330 00:14:34.890 --> 00:14:36.660 But if I turn this off, 331 00:14:36.660 --> 00:14:40.673 you should see now actually add being called. 332 00:14:42.430 --> 00:14:46.563 So let's log the result of that to the console. 333 00:14:48.320 --> 00:14:50.003 And so we should now see five. 334 00:14:50.840 --> 00:14:52.503 And indeed, now it works. 335 00:14:54.240 --> 00:14:55.150 Now, right? 336 00:14:55.150 --> 00:14:57.820 But we should always use strict mode. 337 00:14:57.820 --> 00:15:00.910 And so now we should get that error back. 338 00:15:00.910 --> 00:15:03.470 And so lets also comment this out. 339 00:15:03.470 --> 00:15:05.913 And so you can keep this here as a reference. 340 00:15:06.750 --> 00:15:07.590 Okay. 341 00:15:07.590 --> 00:15:08.963 And now to finish. 342 00:15:10.070 --> 00:15:12.470 Let's do some experiments here. 343 00:15:12.470 --> 00:15:14.300 So what do you think is gonna happen 344 00:15:14.300 --> 00:15:17.493 if we declare a variable in this scope here? 345 00:15:18.800 --> 00:15:21.980 So in this new block scope that already exists 346 00:15:21.980 --> 00:15:23.960 in a parent scope? 347 00:15:23.960 --> 00:15:26.073 So for example, let's say here, 348 00:15:27.630 --> 00:15:28.463 const 349 00:15:30.410 --> 00:15:32.970 first name, equals 350 00:15:34.900 --> 00:15:36.230 Steven. 351 00:15:36.230 --> 00:15:39.280 So what do you think this string here 352 00:15:39.280 --> 00:15:41.300 will look like now? 353 00:15:41.300 --> 00:15:42.840 So do you think that here, 354 00:15:42.840 --> 00:15:45.283 it will say Jonas or Steven? 355 00:15:46.170 --> 00:15:47.553 Well, let's try. 356 00:15:48.610 --> 00:15:49.800 And in fact, 357 00:15:49.800 --> 00:15:52.040 it now says Steven, 358 00:15:52.040 --> 00:15:52.910 and that happens, 359 00:15:52.910 --> 00:15:54.480 because as always, 360 00:15:54.480 --> 00:15:57.410 JavaScript tries to look for the variable name 361 00:15:57.410 --> 00:15:58.900 in the current scope. 362 00:15:58.900 --> 00:16:02.620 And right now, it actually is in the current scope. 363 00:16:02.620 --> 00:16:06.350 So first name is indeed, in this same block. 364 00:16:06.350 --> 00:16:07.930 So in this same scope, 365 00:16:07.930 --> 00:16:11.600 and so therefore, JavaScript will then use that variable 366 00:16:11.600 --> 00:16:14.670 and not perform any variable look up 367 00:16:14.670 --> 00:16:16.010 in the scope chain. 368 00:16:16.010 --> 00:16:17.070 So the scope chain 369 00:16:17.070 --> 00:16:18.780 isn't necessary at all, 370 00:16:18.780 --> 00:16:21.070 if the variable that we're looking for 371 00:16:21.070 --> 00:16:23.510 is already in the current scope. 372 00:16:23.510 --> 00:16:27.400 And so that's exactly the case right here. 373 00:16:27.400 --> 00:16:28.233 But of course, 374 00:16:28.233 --> 00:16:30.047 then outside of this block, 375 00:16:30.047 --> 00:16:31.990 the first name variable 376 00:16:31.990 --> 00:16:33.530 is still gonna be the one 377 00:16:33.530 --> 00:16:35.770 coming from the scope chain. 378 00:16:35.770 --> 00:16:36.780 So that's why here, 379 00:16:36.780 --> 00:16:38.133 you still see Jonas. 380 00:16:39.620 --> 00:16:41.950 So right here in the printAge function, 381 00:16:41.950 --> 00:16:43.890 which is another scope. 382 00:16:43.890 --> 00:16:48.123 So it's the parent scope of this scope, right? 383 00:16:49.120 --> 00:16:52.490 And so here, first name is still Jonas, 384 00:16:52.490 --> 00:16:56.410 because it is not in the current scope of this function. 385 00:16:56.410 --> 00:16:59.740 And therefore, JavaScript will make a variable lookup 386 00:16:59.740 --> 00:17:00.960 in the scope chain, 387 00:17:00.960 --> 00:17:03.050 until it can find first name, 388 00:17:03.050 --> 00:17:04.693 which is still Jonas, 389 00:17:06.120 --> 00:17:07.453 coming from down here. 390 00:17:08.560 --> 00:17:12.130 So here we created a new variable 391 00:17:12.130 --> 00:17:14.403 with the same name of another variable 392 00:17:14.403 --> 00:17:17.770 that we had already created in a parent scope. 393 00:17:17.770 --> 00:17:21.010 So we have two first name variables right now. 394 00:17:21.010 --> 00:17:23.180 But that is not a problem at all. 395 00:17:23.180 --> 00:17:24.370 Because in fact, 396 00:17:24.370 --> 00:17:26.900 they are completely different variables, 397 00:17:26.900 --> 00:17:29.380 they simply happen to have the same name. 398 00:17:29.380 --> 00:17:31.220 But that's not a problem at all, 399 00:17:31.220 --> 00:17:34.250 because they are defined in different scopes. 400 00:17:34.250 --> 00:17:36.700 And so you can have repeated variable names. 401 00:17:36.700 --> 00:17:38.960 That's absolutely no problem. 402 00:17:38.960 --> 00:17:40.270 And that's also the reason 403 00:17:40.270 --> 00:17:42.410 why you can have different functions 404 00:17:42.410 --> 00:17:44.240 with the same parameter names. 405 00:17:44.240 --> 00:17:45.470 Because again, 406 00:17:45.470 --> 00:17:48.890 each parameter is only defined in that scope 407 00:17:48.890 --> 00:17:50.200 of that function. 408 00:17:50.200 --> 00:17:52.380 And therefore, it's not a problem at all 409 00:17:52.380 --> 00:17:56.610 to have many functions with the exact same parameter names, 410 00:17:56.610 --> 00:17:58.650 in the same way that it's not a problem 411 00:17:58.650 --> 00:18:01.320 to have functions with the same variable names 412 00:18:01.320 --> 00:18:03.000 inside of them. 413 00:18:03.000 --> 00:18:07.360 But now watch what happens when we redefine a variable 414 00:18:07.360 --> 00:18:10.730 from a parent scope inside of an inner scope. 415 00:18:10.730 --> 00:18:12.870 So not creating a new variable, 416 00:18:12.870 --> 00:18:15.150 but simply reassigning the value 417 00:18:15.150 --> 00:18:16.313 of a variable. 418 00:18:18.170 --> 00:18:20.270 So let's do that here. 419 00:18:20.270 --> 00:18:21.840 And let's now say 420 00:18:21.840 --> 00:18:25.400 output equals 421 00:18:25.400 --> 00:18:29.170 new output. 422 00:18:29.170 --> 00:18:30.730 And here we then have to change 423 00:18:30.730 --> 00:18:32.223 the output to a let. 424 00:18:33.500 --> 00:18:36.010 But let's just analyze what we did here. 425 00:18:36.010 --> 00:18:39.290 So we are in the printAge scope. 426 00:18:39.290 --> 00:18:41.190 So that's all of this here. 427 00:18:41.190 --> 00:18:44.150 And in here, we have the output variable, 428 00:18:44.150 --> 00:18:46.530 then we have a inner scope, 429 00:18:46.530 --> 00:18:48.630 so like a child scope here, 430 00:18:48.630 --> 00:18:52.260 which then redefines this output variable 431 00:18:52.260 --> 00:18:53.850 from the outer scope. 432 00:18:53.850 --> 00:18:57.563 And so if we then try to access that output here again, 433 00:19:00.550 --> 00:19:02.603 what do you think is gonna happen? 434 00:19:04.120 --> 00:19:07.360 Well, we get new output here. 435 00:19:07.360 --> 00:19:10.490 And that is because we actually manipulated 436 00:19:10.490 --> 00:19:12.390 an existing variable here, 437 00:19:12.390 --> 00:19:14.650 inside of a child scope. 438 00:19:14.650 --> 00:19:17.580 So inside of an inner scope, right? 439 00:19:17.580 --> 00:19:19.900 We did not create a new variable, 440 00:19:19.900 --> 00:19:23.610 we simply redefined a variable that we accessed here 441 00:19:23.610 --> 00:19:25.083 from the parent scope. 442 00:19:26.270 --> 00:19:28.660 So if we did create a new 443 00:19:28.660 --> 00:19:30.570 variable called output here, 444 00:19:30.570 --> 00:19:32.390 then we would have the same situation 445 00:19:32.390 --> 00:19:35.520 as before with first name. 446 00:19:35.520 --> 00:19:38.510 So this would then be a completely different variable, 447 00:19:38.510 --> 00:19:43.430 and would not at all affect the output from the outer scope. 448 00:19:43.430 --> 00:19:45.950 And so now as we save this, 449 00:19:45.950 --> 00:19:48.160 then this new output should disappear. 450 00:19:48.160 --> 00:19:50.690 And should be back to the original output 451 00:19:50.690 --> 00:19:53.053 as we defined it in the scope now. 452 00:19:54.520 --> 00:19:58.100 So indeed, now the new output is gone. 453 00:19:58.100 --> 00:19:59.560 And again, that's because 454 00:19:59.560 --> 00:20:01.950 it is now its own variable. 455 00:20:01.950 --> 00:20:03.290 So a brand new variable, 456 00:20:03.290 --> 00:20:05.860 which just happens to have the same name 457 00:20:05.860 --> 00:20:08.900 as a variable from its parent scope. 458 00:20:08.900 --> 00:20:10.570 But to illustrate this here, 459 00:20:10.570 --> 00:20:13.750 let's actually leave it like this. 460 00:20:13.750 --> 00:20:15.113 And I will also comment it, 461 00:20:16.960 --> 00:20:21.440 creating new variable with 462 00:20:21.440 --> 00:20:23.050 same name as 463 00:20:23.940 --> 00:20:25.150 outer scopes 464 00:20:27.100 --> 00:20:27.933 variable. 465 00:20:30.330 --> 00:20:32.203 And let's put this together here. 466 00:20:37.240 --> 00:20:38.230 Reassigning 467 00:20:39.980 --> 00:20:42.280 outer scopes 468 00:20:43.790 --> 00:20:45.060 variable. 469 00:20:45.060 --> 00:20:48.000 So again, two completely different things. 470 00:20:48.000 --> 00:20:50.410 But I think this is a very nice example 471 00:20:50.410 --> 00:20:52.360 to once again illustrate 472 00:20:52.360 --> 00:20:54.610 how the scope chain works. 473 00:20:54.610 --> 00:20:55.520 And with this, 474 00:20:55.520 --> 00:20:58.140 I hope that you now completely understand 475 00:20:58.140 --> 00:21:01.210 how scoping works in JavaScript. 476 00:21:01.210 --> 00:21:02.750 Also just keep in mind 477 00:21:02.750 --> 00:21:04.920 that real code should (chuckles) 478 00:21:04.920 --> 00:21:07.420 probably not be this confusing, 479 00:21:07.420 --> 00:21:11.143 but this was just to show you how scoping works.