Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,250 --> 00:00:04,570 Now it's time to see scoping in action 2 2 00:00:04,570 --> 00:00:07,450 in a semi complex example, 3 3 00:00:07,450 --> 00:00:09,260 to make sure that you really get 4 4 00:00:09,260 --> 00:00:11,473 the super important concept. 5 5 00:00:13,060 --> 00:00:14,350 And as always, 6 6 00:00:14,350 --> 00:00:18,500 let's start by opening up a new VS Code window 7 7 00:00:18,500 --> 00:00:20,203 with (mumbles) starter files. 8 8 00:00:23,010 --> 00:00:25,343 So that's already here at my desktop. 9 9 00:00:28,170 --> 00:00:29,003 And again, 10 10 00:00:29,003 --> 00:00:30,963 I have the prettier configuration here. 11 11 00:00:32,000 --> 00:00:34,533 The index is not really important here. 12 12 00:00:36,120 --> 00:00:37,890 And so let's just start writing 13 13 00:00:37,890 --> 00:00:39,910 some JavaScript code here. 14 14 00:00:39,910 --> 00:00:41,910 And I'm gonna start by writing a 15 15 00:00:41,910 --> 00:00:44,000 simple calcAge function. 16 16 00:00:44,000 --> 00:00:47,270 And this time let's actually use a function declaration. 17 17 00:00:47,270 --> 00:00:49,100 Not that it matters. 18 18 00:00:49,100 --> 00:00:51,160 But just to have some diversity, 19 19 00:00:51,160 --> 00:00:54,033 and not always create the same type of function. 20 20 00:00:55,477 --> 00:00:56,750 So calcAge, 21 21 00:00:56,750 --> 00:00:59,063 which is gonna receive a birth year. 22 22 00:01:03,780 --> 00:01:05,680 And then all this function does 23 23 00:01:05,680 --> 00:01:07,393 is to calculate an age. 24 24 00:01:08,400 --> 00:01:11,310 And so this is nothing new at this point. 25 25 00:01:11,310 --> 00:01:12,863 So the current year, 26 26 00:01:13,800 --> 00:01:17,063 minus the birth year. 27 27 00:01:17,910 --> 00:01:19,280 Then let's also 28 28 00:01:21,070 --> 00:01:23,133 return that age here. 29 29 00:01:24,220 --> 00:01:26,780 And so this calcAge function here is, 30 30 00:01:26,780 --> 00:01:28,730 as we learned in the last lecture, 31 31 00:01:28,730 --> 00:01:30,870 defined in a global scope. 32 32 00:01:30,870 --> 00:01:32,240 And that's because it is 33 33 00:01:32,240 --> 00:01:35,200 here in the top level code, right? 34 34 00:01:35,200 --> 00:01:39,010 Also, this function here creates its own scope. 35 35 00:01:39,010 --> 00:01:41,470 And that scope is gonna be equivalent 36 36 00:01:41,470 --> 00:01:43,300 to the variable environment 37 37 00:01:43,300 --> 00:01:45,720 of its execution context. 38 38 00:01:45,720 --> 00:01:47,430 So that's all the stuff we learned 39 39 00:01:47,430 --> 00:01:50,480 over the past couple of lectures. 40 40 00:01:50,480 --> 00:01:53,993 And now let's create a global variable here. 41 41 00:01:55,630 --> 00:01:57,580 So I'm gonna call that one 42 42 00:01:57,580 --> 00:01:59,403 first, name. 43 43 00:02:02,060 --> 00:02:04,770 And now let's actually call the function 44 44 00:02:06,290 --> 00:02:07,483 so calcAge, 45 45 00:02:09,240 --> 00:02:11,410 with 1991. 46 46 00:02:11,410 --> 00:02:14,550 And then here inside of this calcAge function, 47 47 00:02:14,550 --> 00:02:17,063 I will log first name to the console. 48 48 00:02:20,660 --> 00:02:23,180 So first name. 49 49 00:02:23,180 --> 00:02:24,140 Now as you see, 50 50 00:02:24,140 --> 00:02:27,760 this first name variable is not actually in this scope 51 51 00:02:27,760 --> 00:02:29,770 of the calcAge function. 52 52 00:02:29,770 --> 00:02:32,230 However, it is a global variable 53 53 00:02:32,230 --> 00:02:34,100 that we defined out here. 54 54 00:02:34,100 --> 00:02:35,110 And so therefore, 55 55 00:02:35,110 --> 00:02:36,290 through the scope chain, 56 56 00:02:36,290 --> 00:02:38,110 it's gonna be made available 57 57 00:02:38,110 --> 00:02:40,430 also inside of this scope. 58 58 00:02:40,430 --> 00:02:42,533 So inside of this function, right? 59 59 00:02:43,430 --> 00:02:46,293 So let's just execute this code here, 60 60 00:02:47,270 --> 00:02:49,630 just to see that it actually works. 61 61 00:02:49,630 --> 00:02:52,510 And then we're gonna explain a little bit more. 62 62 00:02:52,510 --> 00:02:54,853 So live server. 63 63 00:02:58,400 --> 00:03:00,510 And so here we go. 64 64 00:03:00,510 --> 00:03:02,423 Let's open up the console. 65 65 00:03:07,880 --> 00:03:10,053 Let's reload to get rid of this error. 66 66 00:03:10,949 --> 00:03:11,782 And okay. 67 67 00:03:13,210 --> 00:03:14,990 So you see that indeed, 68 68 00:03:14,990 --> 00:03:17,320 Jonas here was printed to the console, 69 69 00:03:17,320 --> 00:03:19,840 which is the first name variable. 70 70 00:03:19,840 --> 00:03:23,170 And so when this line of code here was executed, 71 71 00:03:23,170 --> 00:03:26,950 JavaScript did not find this variable in the scope. 72 72 00:03:26,950 --> 00:03:29,380 And so it did a variable lookup, 73 73 00:03:29,380 --> 00:03:31,500 where it looked up in the scope chain 74 74 00:03:31,500 --> 00:03:34,150 to see if it found the variable there. 75 75 00:03:34,150 --> 00:03:36,050 And indeed, the parent scope 76 76 00:03:36,050 --> 00:03:38,980 of the calcAge function is the global scope. 77 77 00:03:38,980 --> 00:03:41,530 And the first name variable is in there, 78 78 00:03:41,530 --> 00:03:44,690 and therefore JavaScript could then use that. 79 79 00:03:44,690 --> 00:03:45,830 Now here, if we tried, 80 80 00:03:45,830 --> 00:03:48,070 for example just name, 81 81 00:03:48,070 --> 00:03:50,570 then JavaScript would also do a lookup, 82 82 00:03:50,570 --> 00:03:53,630 but it would not find this variable in the global scope. 83 83 00:03:53,630 --> 00:03:56,250 And therefore, we would get an error. 84 84 00:03:56,250 --> 00:03:57,310 Now with this variable, 85 85 00:03:57,310 --> 00:03:59,350 actually we would get no error. 86 86 00:03:59,350 --> 00:04:01,000 As I explained to you in the beginning, 87 87 00:04:01,000 --> 00:04:02,390 this is kind of a special 88 88 00:04:02,390 --> 00:04:04,850 variable name that we should not use. 89 89 00:04:04,850 --> 00:04:07,560 So let's say I used last name. 90 90 00:04:07,560 --> 00:04:09,360 And so again, this variable 91 91 00:04:09,360 --> 00:04:11,150 is nowhere to be found. 92 92 00:04:11,150 --> 00:04:12,910 So even by doing a look up 93 93 00:04:12,910 --> 00:04:14,400 into the parent scope, 94 94 00:04:14,400 --> 00:04:15,953 and so now when I saved this, 95 95 00:04:17,040 --> 00:04:20,623 then I get this last name is not define error. 96 96 00:04:21,500 --> 00:04:22,670 Okay? 97 97 00:04:22,670 --> 00:04:25,053 And so going back here to first name, 98 98 00:04:26,090 --> 00:04:27,200 then of course, 99 99 00:04:27,200 --> 00:04:29,120 everything works just the same. 100 100 00:04:29,120 --> 00:04:30,060 And that is true, 101 101 00:04:30,060 --> 00:04:31,980 even though this variable here 102 102 00:04:31,980 --> 00:04:36,080 was actually defined after the calcAge function. 103 103 00:04:36,080 --> 00:04:37,930 But that's not a problem at all. 104 104 00:04:37,930 --> 00:04:41,160 Because remember that the code in the function 105 105 00:04:41,160 --> 00:04:44,730 is only executed once it's actually called. 106 106 00:04:44,730 --> 00:04:46,840 And so that happens after 107 107 00:04:46,840 --> 00:04:50,080 the declaration of the first name variable. 108 108 00:04:50,080 --> 00:04:51,640 So right here. 109 109 00:04:51,640 --> 00:04:53,430 And so at this point in the code, 110 110 00:04:53,430 --> 00:04:55,700 the first name variable is already 111 111 00:04:55,700 --> 00:04:58,880 in the global execution variable environment. 112 112 00:04:58,880 --> 00:05:02,470 So in the global scope, ready to be used. 113 113 00:05:02,470 --> 00:05:06,470 Okay, but let's actually get rid of this here. 114 114 00:05:06,470 --> 00:05:10,563 And let's create another function inside of this function. 115 115 00:05:11,660 --> 00:05:15,123 So function, printAge 116 116 00:05:15,123 --> 00:05:18,380 and this will print a nice string to the console. 117 117 00:05:18,380 --> 00:05:21,040 And as you also know already, 118 118 00:05:21,040 --> 00:05:23,350 it also creates a new scope. 119 119 00:05:23,350 --> 00:05:25,650 And let's create an output variable, 120 120 00:05:25,650 --> 00:05:27,480 which is gonna be the string 121 121 00:05:27,480 --> 00:05:28,793 that we will build here. 122 122 00:05:30,040 --> 00:05:33,083 So output equals, 123 123 00:05:34,280 --> 00:05:35,280 you are 124 124 00:05:37,050 --> 00:05:38,570 the age, 125 125 00:05:38,570 --> 00:05:40,800 and I forgot the curly braces 126 126 00:05:41,870 --> 00:05:43,400 born in 127 127 00:05:46,990 --> 00:05:47,863 birth year. 128 128 00:05:49,470 --> 00:05:54,150 And then we simply log that message to the console. 129 129 00:05:54,150 --> 00:05:56,530 And now to actually see this result here, 130 130 00:05:56,530 --> 00:05:59,380 we need to, of course, call the function. 131 131 00:05:59,380 --> 00:06:00,853 So let's do that right here. 132 132 00:06:02,070 --> 00:06:02,903 So printAge. 133 133 00:06:05,100 --> 00:06:07,850 And now we get a string with all the data 134 134 00:06:07,850 --> 00:06:09,930 that we actually computed, 135 135 00:06:09,930 --> 00:06:11,530 and it works just fine. 136 136 00:06:11,530 --> 00:06:14,110 So we get the age that was calculated here, 137 137 00:06:14,110 --> 00:06:15,590 and also the birth year 138 138 00:06:15,590 --> 00:06:18,150 that was passed into this function. 139 139 00:06:18,150 --> 00:06:19,190 And so here again, 140 140 00:06:19,190 --> 00:06:22,900 we see the magic of the scope chain in action. 141 141 00:06:22,900 --> 00:06:24,370 So once again, 142 142 00:06:24,370 --> 00:06:28,260 the engine as it is executing this printAge function 143 143 00:06:28,260 --> 00:06:29,670 is trying to access 144 144 00:06:29,670 --> 00:06:32,270 or is trying to find the age variable 145 145 00:06:32,270 --> 00:06:33,670 in the current scope, 146 146 00:06:33,670 --> 00:06:35,890 however it cannot find it there. 147 147 00:06:35,890 --> 00:06:36,723 And so therefore, 148 148 00:06:36,723 --> 00:06:38,400 it goes to the parent scope, 149 149 00:06:38,400 --> 00:06:40,200 where it will then find 150 150 00:06:40,200 --> 00:06:42,120 this age variable of course, 151 151 00:06:42,120 --> 00:06:43,283 that we created here. 152 152 00:06:44,172 --> 00:06:47,210 And the same is true for the birth year variable, 153 153 00:06:47,210 --> 00:06:48,770 because for scoping 154 154 00:06:48,770 --> 00:06:50,410 the parameter of a function 155 155 00:06:50,410 --> 00:06:53,620 work just like normal variables. 156 156 00:06:53,620 --> 00:06:55,770 And also remember that we said 157 157 00:06:55,770 --> 00:06:58,030 that the scope of a variable 158 158 00:06:58,030 --> 00:06:59,810 is the entire region of the code 159 159 00:06:59,810 --> 00:07:02,660 in which the variable is accessible. 160 160 00:07:02,660 --> 00:07:03,780 So for example, 161 161 00:07:03,780 --> 00:07:05,907 the scope of the age variable 162 162 00:07:05,907 --> 00:07:08,480 is all of this area here. 163 163 00:07:08,480 --> 00:07:09,884 So everywhere here, 164 164 00:07:09,884 --> 00:07:11,950 the age variable is accessible. 165 165 00:07:13,270 --> 00:07:14,103 So of course, 166 166 00:07:14,103 --> 00:07:16,610 in the calcAge function, where it was defined, 167 167 00:07:16,610 --> 00:07:19,630 and then also in all the child scopes, 168 168 00:07:19,630 --> 00:07:22,010 so all the inner scopes, okay? 169 169 00:07:22,010 --> 00:07:25,410 But of course, age is not accessible outside 170 170 00:07:25,410 --> 00:07:27,750 of the calcAge scope. 171 171 00:07:27,750 --> 00:07:29,843 So let me demonstrate that here. 172 172 00:07:31,640 --> 00:07:33,570 So here, we will not be able 173 173 00:07:33,570 --> 00:07:35,800 to access the age variable. 174 174 00:07:35,800 --> 00:07:38,550 And that is because as I mentioned, 175 175 00:07:38,550 --> 00:07:41,440 the scope chain is a one way street. 176 176 00:07:41,440 --> 00:07:43,050 So only an inner scope 177 177 00:07:43,050 --> 00:07:46,570 can have access to the variables of its outer scope, 178 178 00:07:46,570 --> 00:07:48,250 but not the other way around. 179 179 00:07:48,250 --> 00:07:50,460 So now here we are in the outer scope, 180 180 00:07:50,460 --> 00:07:53,850 and we cannot have access to the variables 181 181 00:07:53,850 --> 00:07:55,530 of a child scope, 182 182 00:07:55,530 --> 00:07:58,370 which the scope of the calcAge function here 183 183 00:07:59,690 --> 00:08:01,800 surely is, okay? 184 184 00:08:01,800 --> 00:08:04,160 And the same goes for functions again. 185 185 00:08:04,160 --> 00:08:07,920 And so we cannot call the printAge function out here, 186 186 00:08:07,920 --> 00:08:09,363 for the same reason. 187 187 00:08:10,930 --> 00:08:12,863 Let's comment out this one. 188 188 00:08:14,070 --> 00:08:17,063 And so now we get printAge is not defined. 189 189 00:08:18,150 --> 00:08:18,983 Okay? 190 190 00:08:18,983 --> 00:08:21,140 So here in the global scope, 191 191 00:08:21,140 --> 00:08:24,860 we do not have access to any variables defined 192 192 00:08:24,860 --> 00:08:26,293 in any other scope. 193 193 00:08:28,070 --> 00:08:29,530 Now, all right? 194 194 00:08:29,530 --> 00:08:32,840 And here, let's actually take it to the next level, 195 195 00:08:32,840 --> 00:08:36,023 and also include the name of the person. 196 196 00:08:37,080 --> 00:08:39,573 So let's say, first name. 197 197 00:08:41,030 --> 00:08:43,280 And let's try this now. 198 198 00:08:43,280 --> 00:08:45,560 And indeed, it does have access 199 199 00:08:45,560 --> 00:08:47,520 to the first name variable. 200 200 00:08:47,520 --> 00:08:48,353 And so here, 201 201 00:08:48,353 --> 00:08:50,730 the engine is doing an even bigger, 202 202 00:08:50,730 --> 00:08:52,903 or a longer variable lookup. 203 203 00:08:53,940 --> 00:08:56,200 So right now, we are of course, 204 204 00:08:56,200 --> 00:08:58,540 in the printAge scope here. 205 205 00:08:58,540 --> 00:09:01,550 And so then JavaScript cannot find a variable 206 206 00:09:01,550 --> 00:09:02,780 in the current scope. 207 207 00:09:02,780 --> 00:09:04,970 So it looks up in the scope chain, 208 208 00:09:04,970 --> 00:09:07,400 which is then the next step, 209 209 00:09:07,400 --> 00:09:08,970 the calcAge function. 210 210 00:09:08,970 --> 00:09:13,110 However, it can also not find first name in this scope, 211 211 00:09:13,110 --> 00:09:15,600 and therefore it goes up even further 212 212 00:09:15,600 --> 00:09:17,130 into the global scope. 213 213 00:09:17,130 --> 00:09:18,720 And there it is. 214 214 00:09:18,720 --> 00:09:20,170 And so this is the value 215 215 00:09:20,170 --> 00:09:21,423 that is gonna be used. 216 216 00:09:22,300 --> 00:09:24,430 Okay, so I hope 217 217 00:09:24,430 --> 00:09:27,230 all of this made sense until this point. 218 218 00:09:27,230 --> 00:09:28,630 Let's now go further 219 219 00:09:28,630 --> 00:09:30,750 and also create a block scope 220 220 00:09:30,750 --> 00:09:33,600 right here in this printAge function. 221 221 00:09:33,600 --> 00:09:36,193 So let's do an if statement here. 222 222 00:09:37,060 --> 00:09:39,390 And we will check if the person 223 223 00:09:39,390 --> 00:09:42,190 based on the birth year is a millennial. 224 224 00:09:42,190 --> 00:09:44,120 And so that is if you were born 225 225 00:09:44,120 --> 00:09:47,450 between 1981 and 1996. 226 226 00:09:47,450 --> 00:09:48,950 Then you're a millennial, 227 227 00:09:48,950 --> 00:09:50,350 and so let's check for that. 228 228 00:09:51,430 --> 00:09:54,220 So birth year needs to be 229 229 00:09:54,220 --> 00:09:56,080 at least 1981 230 230 00:09:58,760 --> 00:09:59,803 and below, 231 231 00:10:02,210 --> 00:10:04,003 below 1996. 232 232 00:10:06,994 --> 00:10:09,110 And so here we are creating a block. 233 233 00:10:09,110 --> 00:10:13,370 And therefore, this will be a new block scope. 234 234 00:10:13,370 --> 00:10:14,730 And so let's now 235 235 00:10:14,730 --> 00:10:17,663 define a variable here using const. 236 236 00:10:19,150 --> 00:10:21,030 And I'm gonna call it string. 237 237 00:10:21,030 --> 00:10:21,863 And let's say, 238 238 00:10:23,160 --> 00:10:26,300 so first we get this string here to the console. 239 239 00:10:26,300 --> 00:10:27,890 And then we can also say, 240 240 00:10:27,890 --> 00:10:29,500 so if the person is a millennial, 241 241 00:10:29,500 --> 00:10:30,530 we will say, 242 242 00:10:30,530 --> 00:10:34,460 oh, and you're a millennial. 243 243 00:10:36,830 --> 00:10:38,633 And then again, the first name. 244 244 00:10:40,240 --> 00:10:41,610 And so now we are adding 245 245 00:10:41,610 --> 00:10:43,180 even one more step here 246 246 00:10:43,180 --> 00:10:44,660 to the scope chain, 247 247 00:10:44,660 --> 00:10:48,000 because now the look up for first name 248 248 00:10:48,000 --> 00:10:50,010 is even longer. 249 249 00:10:50,010 --> 00:10:51,723 But it still will work. 250 250 00:10:53,320 --> 00:10:55,713 So lemme log that to the console. 251 251 00:10:59,220 --> 00:11:00,700 And so in this case, 252 252 00:11:00,700 --> 00:11:03,560 I am clearly a millennial, okay? 253 253 00:11:03,560 --> 00:11:06,920 And again, Jonas here is still found 254 254 00:11:06,920 --> 00:11:07,820 all the way here 255 255 00:11:07,820 --> 00:11:09,433 from the outer scope. 256 256 00:11:10,550 --> 00:11:12,790 But now, what do you think will happen 257 257 00:11:12,790 --> 00:11:15,490 as we try to log this variable 258 258 00:11:15,490 --> 00:11:18,230 outside of this block scope? 259 259 00:11:18,230 --> 00:11:19,780 So basically do the same, 260 260 00:11:19,780 --> 00:11:21,963 but outside of the block. 261 261 00:11:23,590 --> 00:11:28,590 So indeed, we get an error that str is not defined. 262 262 00:11:28,780 --> 00:11:32,500 And again, that's because const and let variables 263 263 00:11:32,500 --> 00:11:34,210 are block scoped. 264 264 00:11:34,210 --> 00:11:35,620 So they are valid. 265 265 00:11:35,620 --> 00:11:39,130 So they are available only inside the block 266 266 00:11:39,130 --> 00:11:40,573 in which they were created. 267 267 00:11:41,870 --> 00:11:45,560 But now watch as we create yet another variable, 268 268 00:11:45,560 --> 00:11:47,283 which I will call millennial. 269 269 00:11:50,020 --> 00:11:51,683 And let's set it to true. 270 270 00:11:52,960 --> 00:11:56,560 And so this is an old pre ES6 variable. 271 271 00:11:56,560 --> 00:11:59,530 And so what do you think will happen, 272 272 00:11:59,530 --> 00:12:02,903 as we log it, also here outside of this block? 273 273 00:12:05,170 --> 00:12:06,920 So we need to comment out this one. 274 274 00:12:08,230 --> 00:12:12,010 So again, what do you think is gonna happen now? 275 275 00:12:12,010 --> 00:12:15,620 And JavaScript can actually find it. 276 276 00:12:15,620 --> 00:12:17,650 And so that is because of the fact 277 277 00:12:17,650 --> 00:12:19,830 that var variables, 278 278 00:12:19,830 --> 00:12:22,660 so variables declared with the var keyword 279 279 00:12:22,660 --> 00:12:24,420 are function scoped. 280 280 00:12:24,420 --> 00:12:26,480 So they simply ignore the block, 281 281 00:12:26,480 --> 00:12:29,180 because they are not block scoped at all. 282 282 00:12:29,180 --> 00:12:30,910 They're just function scoped. 283 283 00:12:30,910 --> 00:12:33,373 And so here, we are still in the same function. 284 284 00:12:34,310 --> 00:12:35,250 So here, 285 285 00:12:35,250 --> 00:12:37,330 here we are trying to access the variable 286 286 00:12:37,330 --> 00:12:41,990 that was defined in the same function, right? 287 287 00:12:41,990 --> 00:12:42,890 So right now, 288 288 00:12:42,890 --> 00:12:45,070 the scope of the millennial variable 289 289 00:12:45,070 --> 00:12:47,120 is this entire function, 290 290 00:12:47,120 --> 00:12:51,050 no matter if it was declared inside of a block or not. 291 291 00:12:51,050 --> 00:12:54,470 Because again, var variables do not care 292 292 00:12:54,470 --> 00:12:56,110 about blocks at all. 293 293 00:12:56,110 --> 00:12:57,090 And so therefore, 294 294 00:12:57,090 --> 00:12:59,950 we can then access the millennial variable 295 295 00:12:59,950 --> 00:13:01,890 inside of its scope. 296 296 00:13:01,890 --> 00:13:02,860 Okay? 297 297 00:13:02,860 --> 00:13:05,400 So keep that in mind as you use, 298 298 00:13:05,400 --> 00:13:08,200 or as you see a variable declared 299 299 00:13:08,200 --> 00:13:10,250 with var, right? 300 300 00:13:10,250 --> 00:13:12,290 Because, as I said, 301 301 00:13:12,290 --> 00:13:14,610 on your own, you should probably not use 302 302 00:13:14,610 --> 00:13:16,370 this variable yourself, 303 303 00:13:16,370 --> 00:13:19,210 always just use const, or let. 304 304 00:13:19,210 --> 00:13:21,740 But if you are reading other code bases, 305 305 00:13:21,740 --> 00:13:24,120 or even working with older code, 306 306 00:13:24,120 --> 00:13:25,660 then keep in mind 307 307 00:13:25,660 --> 00:13:28,660 that this is how the var variable works. 308 308 00:13:28,660 --> 00:13:30,490 And so that's why it's very important 309 309 00:13:30,490 --> 00:13:33,820 to learn about str as well. 310 310 00:13:33,820 --> 00:13:35,410 Okay, next up, 311 311 00:13:35,410 --> 00:13:39,160 let's prove that functions are also in fact, 312 312 00:13:39,160 --> 00:13:41,733 block scoped starting in ES6. 313 313 00:13:43,490 --> 00:13:45,080 So let's just create a simple 314 314 00:13:46,440 --> 00:13:48,763 function here, that will add two values. 315 315 00:13:52,730 --> 00:13:55,253 Return A plus B. 316 316 00:13:56,440 --> 00:13:58,020 And then let's 317 317 00:13:59,410 --> 00:14:02,273 attempt to call it here outside of the block. 318 318 00:14:04,720 --> 00:14:07,293 So add two and three. 319 319 00:14:08,960 --> 00:14:12,290 And now we get add is not defined. 320 320 00:14:12,290 --> 00:14:14,060 And so in fact, 321 321 00:14:14,060 --> 00:14:17,120 the scope of this add function here 322 322 00:14:17,120 --> 00:14:20,380 is only the block in which it was defined. 323 323 00:14:20,380 --> 00:14:21,310 So only here, 324 324 00:14:21,310 --> 00:14:23,300 we can use the add function. 325 325 00:14:23,300 --> 00:14:25,210 And so that proves that 326 326 00:14:25,210 --> 00:14:28,230 functions are now in fact, block scoped. 327 327 00:14:28,230 --> 00:14:32,120 But remember that that is only true for strict mode. 328 328 00:14:32,120 --> 00:14:33,060 And so that's the mode 329 329 00:14:33,060 --> 00:14:34,890 that we're actually currently in. 330 330 00:14:34,890 --> 00:14:36,660 But if I turn this off, 331 331 00:14:36,660 --> 00:14:40,673 you should see now actually add being called. 332 332 00:14:42,430 --> 00:14:46,563 So let's log the result of that to the console. 333 333 00:14:48,320 --> 00:14:50,003 And so we should now see five. 334 334 00:14:50,840 --> 00:14:52,503 And indeed, now it works. 335 335 00:14:54,240 --> 00:14:55,150 Now, right? 336 336 00:14:55,150 --> 00:14:57,820 But we should always use strict mode. 337 337 00:14:57,820 --> 00:15:00,910 And so now we should get that error back. 338 338 00:15:00,910 --> 00:15:03,470 And so lets also comment this out. 339 339 00:15:03,470 --> 00:15:05,913 And so you can keep this here as a reference. 340 340 00:15:06,750 --> 00:15:07,590 Okay. 341 341 00:15:07,590 --> 00:15:08,963 And now to finish. 342 342 00:15:10,070 --> 00:15:12,470 Let's do some experiments here. 343 343 00:15:12,470 --> 00:15:14,300 So what do you think is gonna happen 344 344 00:15:14,300 --> 00:15:17,493 if we declare a variable in this scope here? 345 345 00:15:18,800 --> 00:15:21,980 So in this new block scope that already exists 346 346 00:15:21,980 --> 00:15:23,960 in a parent scope? 347 347 00:15:23,960 --> 00:15:26,073 So for example, let's say here, 348 348 00:15:27,630 --> 00:15:28,463 const 349 349 00:15:30,410 --> 00:15:32,970 first name, equals 350 350 00:15:34,900 --> 00:15:36,230 Steven. 351 351 00:15:36,230 --> 00:15:39,280 So what do you think this string here 352 352 00:15:39,280 --> 00:15:41,300 will look like now? 353 353 00:15:41,300 --> 00:15:42,840 So do you think that here, 354 354 00:15:42,840 --> 00:15:45,283 it will say Jonas or Steven? 355 355 00:15:46,170 --> 00:15:47,553 Well, let's try. 356 356 00:15:48,610 --> 00:15:49,800 And in fact, 357 357 00:15:49,800 --> 00:15:52,040 it now says Steven, 358 358 00:15:52,040 --> 00:15:52,910 and that happens, 359 359 00:15:52,910 --> 00:15:54,480 because as always, 360 360 00:15:54,480 --> 00:15:57,410 JavaScript tries to look for the variable name 361 361 00:15:57,410 --> 00:15:58,900 in the current scope. 362 362 00:15:58,900 --> 00:16:02,620 And right now, it actually is in the current scope. 363 363 00:16:02,620 --> 00:16:06,350 So first name is indeed, in this same block. 364 364 00:16:06,350 --> 00:16:07,930 So in this same scope, 365 365 00:16:07,930 --> 00:16:11,600 and so therefore, JavaScript will then use that variable 366 366 00:16:11,600 --> 00:16:14,670 and not perform any variable look up 367 367 00:16:14,670 --> 00:16:16,010 in the scope chain. 368 368 00:16:16,010 --> 00:16:17,070 So the scope chain 369 369 00:16:17,070 --> 00:16:18,780 isn't necessary at all, 370 370 00:16:18,780 --> 00:16:21,070 if the variable that we're looking for 371 371 00:16:21,070 --> 00:16:23,510 is already in the current scope. 372 372 00:16:23,510 --> 00:16:27,400 And so that's exactly the case right here. 373 373 00:16:27,400 --> 00:16:28,233 But of course, 374 374 00:16:28,233 --> 00:16:30,047 then outside of this block, 375 375 00:16:30,047 --> 00:16:31,990 the first name variable 376 376 00:16:31,990 --> 00:16:33,530 is still gonna be the one 377 377 00:16:33,530 --> 00:16:35,770 coming from the scope chain. 378 378 00:16:35,770 --> 00:16:36,780 So that's why here, 379 379 00:16:36,780 --> 00:16:38,133 you still see Jonas. 380 380 00:16:39,620 --> 00:16:41,950 So right here in the printAge function, 381 381 00:16:41,950 --> 00:16:43,890 which is another scope. 382 382 00:16:43,890 --> 00:16:48,123 So it's the parent scope of this scope, right? 383 383 00:16:49,120 --> 00:16:52,490 And so here, first name is still Jonas, 384 384 00:16:52,490 --> 00:16:56,410 because it is not in the current scope of this function. 385 385 00:16:56,410 --> 00:16:59,740 And therefore, JavaScript will make a variable lookup 386 386 00:16:59,740 --> 00:17:00,960 in the scope chain, 387 387 00:17:00,960 --> 00:17:03,050 until it can find first name, 388 388 00:17:03,050 --> 00:17:04,693 which is still Jonas, 389 389 00:17:06,120 --> 00:17:07,453 coming from down here. 390 390 00:17:08,560 --> 00:17:12,130 So here we created a new variable 391 391 00:17:12,130 --> 00:17:14,403 with the same name of another variable 392 392 00:17:14,403 --> 00:17:17,770 that we had already created in a parent scope. 393 393 00:17:17,770 --> 00:17:21,010 So we have two first name variables right now. 394 394 00:17:21,010 --> 00:17:23,180 But that is not a problem at all. 395 395 00:17:23,180 --> 00:17:24,370 Because in fact, 396 396 00:17:24,370 --> 00:17:26,900 they are completely different variables, 397 397 00:17:26,900 --> 00:17:29,380 they simply happen to have the same name. 398 398 00:17:29,380 --> 00:17:31,220 But that's not a problem at all, 399 399 00:17:31,220 --> 00:17:34,250 because they are defined in different scopes. 400 400 00:17:34,250 --> 00:17:36,700 And so you can have repeated variable names. 401 401 00:17:36,700 --> 00:17:38,960 That's absolutely no problem. 402 402 00:17:38,960 --> 00:17:40,270 And that's also the reason 403 403 00:17:40,270 --> 00:17:42,410 why you can have different functions 404 404 00:17:42,410 --> 00:17:44,240 with the same parameter names. 405 405 00:17:44,240 --> 00:17:45,470 Because again, 406 406 00:17:45,470 --> 00:17:48,890 each parameter is only defined in that scope 407 407 00:17:48,890 --> 00:17:50,200 of that function. 408 408 00:17:50,200 --> 00:17:52,380 And therefore, it's not a problem at all 409 409 00:17:52,380 --> 00:17:56,610 to have many functions with the exact same parameter names, 410 410 00:17:56,610 --> 00:17:58,650 in the same way that it's not a problem 411 411 00:17:58,650 --> 00:18:01,320 to have functions with the same variable names 412 412 00:18:01,320 --> 00:18:03,000 inside of them. 413 413 00:18:03,000 --> 00:18:07,360 But now watch what happens when we redefine a variable 414 414 00:18:07,360 --> 00:18:10,730 from a parent scope inside of an inner scope. 415 415 00:18:10,730 --> 00:18:12,870 So not creating a new variable, 416 416 00:18:12,870 --> 00:18:15,150 but simply reassigning the value 417 417 00:18:15,150 --> 00:18:16,313 of a variable. 418 418 00:18:18,170 --> 00:18:20,270 So let's do that here. 419 419 00:18:20,270 --> 00:18:21,840 And let's now say 420 420 00:18:21,840 --> 00:18:25,400 output equals 421 421 00:18:25,400 --> 00:18:29,170 new output. 422 422 00:18:29,170 --> 00:18:30,730 And here we then have to change 423 423 00:18:30,730 --> 00:18:32,223 the output to a let. 424 424 00:18:33,500 --> 00:18:36,010 But let's just analyze what we did here. 425 425 00:18:36,010 --> 00:18:39,290 So we are in the printAge scope. 426 426 00:18:39,290 --> 00:18:41,190 So that's all of this here. 427 427 00:18:41,190 --> 00:18:44,150 And in here, we have the output variable, 428 428 00:18:44,150 --> 00:18:46,530 then we have a inner scope, 429 429 00:18:46,530 --> 00:18:48,630 so like a child scope here, 430 430 00:18:48,630 --> 00:18:52,260 which then redefines this output variable 431 431 00:18:52,260 --> 00:18:53,850 from the outer scope. 432 432 00:18:53,850 --> 00:18:57,563 And so if we then try to access that output here again, 433 433 00:19:00,550 --> 00:19:02,603 what do you think is gonna happen? 434 434 00:19:04,120 --> 00:19:07,360 Well, we get new output here. 435 435 00:19:07,360 --> 00:19:10,490 And that is because we actually manipulated 436 436 00:19:10,490 --> 00:19:12,390 an existing variable here, 437 437 00:19:12,390 --> 00:19:14,650 inside of a child scope. 438 438 00:19:14,650 --> 00:19:17,580 So inside of an inner scope, right? 439 439 00:19:17,580 --> 00:19:19,900 We did not create a new variable, 440 440 00:19:19,900 --> 00:19:23,610 we simply redefined a variable that we accessed here 441 441 00:19:23,610 --> 00:19:25,083 from the parent scope. 442 442 00:19:26,270 --> 00:19:28,660 So if we did create a new 443 443 00:19:28,660 --> 00:19:30,570 variable called output here, 444 444 00:19:30,570 --> 00:19:32,390 then we would have the same situation 445 445 00:19:32,390 --> 00:19:35,520 as before with first name. 446 446 00:19:35,520 --> 00:19:38,510 So this would then be a completely different variable, 447 447 00:19:38,510 --> 00:19:43,430 and would not at all affect the output from the outer scope. 448 448 00:19:43,430 --> 00:19:45,950 And so now as we save this, 449 449 00:19:45,950 --> 00:19:48,160 then this new output should disappear. 450 450 00:19:48,160 --> 00:19:50,690 And should be back to the original output 451 451 00:19:50,690 --> 00:19:53,053 as we defined it in the scope now. 452 452 00:19:54,520 --> 00:19:58,100 So indeed, now the new output is gone. 453 453 00:19:58,100 --> 00:19:59,560 And again, that's because 454 454 00:19:59,560 --> 00:20:01,950 it is now its own variable. 455 455 00:20:01,950 --> 00:20:03,290 So a brand new variable, 456 456 00:20:03,290 --> 00:20:05,860 which just happens to have the same name 457 457 00:20:05,860 --> 00:20:08,900 as a variable from its parent scope. 458 458 00:20:08,900 --> 00:20:10,570 But to illustrate this here, 459 459 00:20:10,570 --> 00:20:13,750 let's actually leave it like this. 460 460 00:20:13,750 --> 00:20:15,113 And I will also comment it, 461 461 00:20:16,960 --> 00:20:21,440 creating new variable with 462 462 00:20:21,440 --> 00:20:23,050 same name as 463 463 00:20:23,940 --> 00:20:25,150 outer scopes 464 464 00:20:27,100 --> 00:20:27,933 variable. 465 465 00:20:30,330 --> 00:20:32,203 And let's put this together here. 466 466 00:20:37,240 --> 00:20:38,230 Reassigning 467 467 00:20:39,980 --> 00:20:42,280 outer scopes 468 468 00:20:43,790 --> 00:20:45,060 variable. 469 469 00:20:45,060 --> 00:20:48,000 So again, two completely different things. 470 470 00:20:48,000 --> 00:20:50,410 But I think this is a very nice example 471 471 00:20:50,410 --> 00:20:52,360 to once again illustrate 472 472 00:20:52,360 --> 00:20:54,610 how the scope chain works. 473 473 00:20:54,610 --> 00:20:55,520 And with this, 474 474 00:20:55,520 --> 00:20:58,140 I hope that you now completely understand 475 475 00:20:58,140 --> 00:21:01,210 how scoping works in JavaScript. 476 476 00:21:01,210 --> 00:21:02,750 Also just keep in mind 477 477 00:21:02,750 --> 00:21:04,920 that real code should (chuckles) 478 478 00:21:04,920 --> 00:21:07,420 probably not be this confusing, 479 479 00:21:07,420 --> 00:21:11,143 but this was just to show you how scoping works. 37708