Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,840 --> 00:00:03,090
Let's continue our journey
2
00:00:03,090 --> 00:00:07,330
of diving really deep into how JavaScript actually works
3
00:00:07,330 --> 00:00:08,960
behind the scenes.
4
00:00:08,960 --> 00:00:11,450
I really hope you have enjoyed it so far
5
00:00:11,450 --> 00:00:14,370
and are able to see the immense value
6
00:00:14,370 --> 00:00:17,460
that these lectures bring to the table.
7
00:00:17,460 --> 00:00:19,170
Now, after this lecture,
8
00:00:19,170 --> 00:00:22,560
there will finally be another coding lecture.
9
00:00:22,560 --> 00:00:25,223
So hang tight, we're almost there.
10
00:00:27,070 --> 00:00:30,770
But now let's get started with this lecture.
11
00:00:30,770 --> 00:00:33,430
So we learned in the last lecture
12
00:00:33,430 --> 00:00:37,810
that each execution context has a variable environment,
13
00:00:37,810 --> 00:00:41,340
a scope chain and a this keyword.
14
00:00:41,340 --> 00:00:44,510
So in this lecture, let's learn what scope
15
00:00:44,510 --> 00:00:46,200
and a scope chain are,
16
00:00:46,200 --> 00:00:49,970
why they are so important and how they work.
17
00:00:49,970 --> 00:00:51,930
And let's start by understanding
18
00:00:51,930 --> 00:00:54,190
what scoping actually means,
19
00:00:54,190 --> 00:00:57,930
and learn about some related concepts as well.
20
00:00:57,930 --> 00:01:02,250
So scoping controls how our program's variables
21
00:01:02,250 --> 00:01:06,293
are organized and accessed by the JavaScript engine.
22
00:01:07,140 --> 00:01:10,430
So basically scoping asks the question,
23
00:01:10,430 --> 00:01:12,560
where do variables live?
24
00:01:12,560 --> 00:01:16,993
Or where can we access a certain variable and where not?
25
00:01:18,030 --> 00:01:19,330
Now in JavaScript,
26
00:01:19,330 --> 00:01:22,720
we have something called lexical scoping.
27
00:01:22,720 --> 00:01:26,060
And lexical scoping means that the way variables
28
00:01:26,060 --> 00:01:28,330
are organized and accessed
29
00:01:28,330 --> 00:01:32,400
is entirely controlled by the placement of functions
30
00:01:32,400 --> 00:01:35,710
and of blocks in the programs code.
31
00:01:35,710 --> 00:01:39,470
For example, a function that is written inside
32
00:01:39,470 --> 00:01:42,940
another function has access to the variables
33
00:01:42,940 --> 00:01:45,930
of the parent function, okay?
34
00:01:45,930 --> 00:01:49,550
So again, variable scoping is influenced
35
00:01:49,550 --> 00:01:54,550
by where exactly we write our functions and code blocks.
36
00:01:55,120 --> 00:01:58,370
Okay, and now about scope itself.
37
00:01:58,370 --> 00:02:01,300
Scope is the space or environment
38
00:02:01,300 --> 00:02:04,430
in which a certain variable is declared,
39
00:02:04,430 --> 00:02:06,230
simple as that.
40
00:02:06,230 --> 00:02:08,050
And in the case of functions,
41
00:02:08,050 --> 00:02:10,870
that's essentially the variable environment
42
00:02:10,870 --> 00:02:15,020
which is stored in the functions execution context.
43
00:02:15,020 --> 00:02:17,210
So if now you're asking yourself,
44
00:02:17,210 --> 00:02:19,460
what's the difference between scope
45
00:02:19,460 --> 00:02:21,770
and variable environment?
46
00:02:21,770 --> 00:02:25,510
Then the answer is that for the case of functions,
47
00:02:25,510 --> 00:02:27,730
it's basically the same.
48
00:02:27,730 --> 00:02:30,770
Now in JavaScript, we have the global scope,
49
00:02:30,770 --> 00:02:33,690
function scope, and block scope.
50
00:02:33,690 --> 00:02:36,340
And we will talk about these in a second.
51
00:02:36,340 --> 00:02:39,560
But first, let's also define what the scope
52
00:02:39,560 --> 00:02:41,620
of a variable is.
53
00:02:41,620 --> 00:02:46,590
So the scope of a variable is basically the entire region
54
00:02:46,590 --> 00:02:51,170
of our code, where a certain variable can be accessed.
55
00:02:51,170 --> 00:02:55,170
Now, some people use the word scope for all of this,
56
00:02:55,170 --> 00:02:58,600
but I like to define all these concepts that we have here
57
00:02:58,600 --> 00:03:03,160
in a clear way, because actually subtle differences.
58
00:03:03,160 --> 00:03:06,070
For example, if you take a close look at it,
59
00:03:06,070 --> 00:03:09,940
scope is not the same as scope of a variable.
60
00:03:09,940 --> 00:03:14,430
And so you should know about the subtle differences, right?
61
00:03:14,430 --> 00:03:18,240
And I know it might still sound all the same for now,
62
00:03:18,240 --> 00:03:21,040
but after looking at a couple of examples
63
00:03:21,040 --> 00:03:23,050
and writing some real code,
64
00:03:23,050 --> 00:03:26,563
you will understand everything I just showed you here.
65
00:03:27,840 --> 00:03:31,000
Anyway, let's now talk about the three different types
66
00:03:31,000 --> 00:03:33,470
of scope in JavaScript.
67
00:03:33,470 --> 00:03:38,470
So that's global scope, function scope and block scope.
68
00:03:38,750 --> 00:03:42,030
And remember, scope is the place in our code
69
00:03:42,030 --> 00:03:44,940
where variables are declared.
70
00:03:44,940 --> 00:03:48,310
And when I say variables, the exact same thing
71
00:03:48,310 --> 00:03:50,800
is true for functions as well.
72
00:03:50,800 --> 00:03:54,420
Because in the end, functions are just values
73
00:03:54,420 --> 00:03:56,990
that are stored in variables.
74
00:03:56,990 --> 00:04:01,120
So first, the global scope is once more
75
00:04:01,120 --> 00:04:03,430
for top level code.
76
00:04:03,430 --> 00:04:06,270
So this is for variables that are declared
77
00:04:06,270 --> 00:04:09,930
outside of any function or block.
78
00:04:09,930 --> 00:04:12,840
These variables will be accessible everywhere
79
00:04:12,840 --> 00:04:17,050
in our program, in all functions and all blocks.
80
00:04:17,050 --> 00:04:19,830
So really, everywhere.
81
00:04:19,830 --> 00:04:23,730
Next, each and every function creates a scope.
82
00:04:23,730 --> 00:04:27,120
And the variables declared inside that function scope
83
00:04:27,120 --> 00:04:30,230
are only accessible inside that function.
84
00:04:30,230 --> 00:04:33,230
This is also called a local scope
85
00:04:33,230 --> 00:04:35,800
opposed to the global scope.
86
00:04:35,800 --> 00:04:40,150
So local variables live in the function so to say.
87
00:04:40,150 --> 00:04:41,920
And outside of the function,
88
00:04:41,920 --> 00:04:45,740
the variables are then not accessible at all.
89
00:04:45,740 --> 00:04:48,390
Again, this is technically the same
90
00:04:48,390 --> 00:04:51,130
as the functions variable environment,
91
00:04:51,130 --> 00:04:54,280
but we still need to give it the name of scope
92
00:04:54,280 --> 00:04:55,510
in this context,
93
00:04:55,510 --> 00:04:58,610
because blocks also creates scopes.
94
00:04:58,610 --> 00:05:01,010
Anyway, in this example here,
95
00:05:01,010 --> 00:05:06,010
the now variable is 2037 inside the cog H function.
96
00:05:06,560 --> 00:05:09,240
And therefore, we can use it in the function
97
00:05:09,240 --> 00:05:10,960
to do calculations.
98
00:05:10,960 --> 00:05:13,260
But outside of the function,
99
00:05:13,260 --> 00:05:15,730
as we try to log it to the console,
100
00:05:15,730 --> 00:05:18,440
we get a reference error.
101
00:05:18,440 --> 00:05:22,010
So JavaScript is trying to find the now variable
102
00:05:22,010 --> 00:05:23,770
in this global scope,
103
00:05:23,770 --> 00:05:27,370
so outside of the function, but it cannot find it.
104
00:05:27,370 --> 00:05:29,750
And so there is gonna be an error.
105
00:05:29,750 --> 00:05:32,430
And if you remember, or pick game project
106
00:05:32,430 --> 00:05:34,060
from the previous section,
107
00:05:34,060 --> 00:05:36,820
there is also the reason why we had to declare
108
00:05:36,820 --> 00:05:41,080
a couple of variables outside of the init function,
109
00:05:41,080 --> 00:05:42,410
remember that?
110
00:05:42,410 --> 00:05:45,920
So we had some variables declared in the init function,
111
00:05:45,920 --> 00:05:47,570
and then that gave us an error
112
00:05:47,570 --> 00:05:50,030
because other functions were trying
113
00:05:50,030 --> 00:05:51,860
to access these variables.
114
00:05:51,860 --> 00:05:54,580
But of course they were in the function scope.
115
00:05:54,580 --> 00:05:56,860
And so they were locally scoped,
116
00:05:56,860 --> 00:05:58,210
and so we couldn't access them
117
00:05:58,210 --> 00:06:02,400
outside of that function where they were declared.
118
00:06:02,400 --> 00:06:04,610
And here, it actually does not matter
119
00:06:04,610 --> 00:06:07,230
what kind of function we're using.
120
00:06:07,230 --> 00:06:10,380
So function declarations, function expressions
121
00:06:10,380 --> 00:06:14,223
and arrow functions all create their own scope.
122
00:06:15,260 --> 00:06:19,500
Now traditionally, only functions used to create scopes
123
00:06:19,500 --> 00:06:20,850
in JavaScript.
124
00:06:20,850 --> 00:06:25,850
But starting in ES6, blocks also creates scopes now.
125
00:06:25,860 --> 00:06:26,810
And with blocks,
126
00:06:26,810 --> 00:06:29,970
we mean everything that is between curly braces,
127
00:06:29,970 --> 00:06:34,510
such as the block of an if statement or a for loop.
128
00:06:34,510 --> 00:06:36,920
So just like with functions,
129
00:06:36,920 --> 00:06:39,570
variables declared inside a block
130
00:06:39,570 --> 00:06:42,350
are only accessible inside that block
131
00:06:42,350 --> 00:06:44,970
and not outside of it.
132
00:06:44,970 --> 00:06:47,950
Now, the big difference is that block scopes
133
00:06:47,950 --> 00:06:52,950
only apply to variables declared with let or const, okay?
134
00:06:53,540 --> 00:06:57,500
So again, only let and const variables
135
00:06:57,500 --> 00:07:01,600
are restricted to the block in which they were created.
136
00:07:01,600 --> 00:07:04,910
That's why we say that let and const variables
137
00:07:04,910 --> 00:07:06,710
are block scoped.
138
00:07:06,710 --> 00:07:10,890
So if I declared a variable using var in this block,
139
00:07:10,890 --> 00:07:14,520
then that variable would actually still be accessible
140
00:07:14,520 --> 00:07:16,550
outside of the block,
141
00:07:16,550 --> 00:07:19,430
and would be scoped to the current function
142
00:07:19,430 --> 00:07:21,410
or to the global scope.
143
00:07:21,410 --> 00:07:25,570
And so we say that var is function scoped.
144
00:07:25,570 --> 00:07:27,970
So in ES5 and before,
145
00:07:27,970 --> 00:07:31,260
we only had global scope and function scope.
146
00:07:31,260 --> 00:07:35,400
And that's why ES5 variables declared with var,
147
00:07:35,400 --> 00:07:39,080
only care about functions, but not about blocks.
148
00:07:39,080 --> 00:07:40,960
They simply ignore them.
149
00:07:40,960 --> 00:07:44,170
Finally, also starting in ES6,
150
00:07:44,170 --> 00:07:47,070
all functions are now also block scoped,
151
00:07:47,070 --> 00:07:49,010
at least in strict mode,
152
00:07:49,010 --> 00:07:52,040
which you should always be using anyway.
153
00:07:52,040 --> 00:07:55,420
And just like with let and const variables,
154
00:07:55,420 --> 00:07:58,750
this means that functions declared inside a block
155
00:07:58,750 --> 00:08:03,410
are only accessible inside that block, okay?
156
00:08:03,410 --> 00:08:06,730
And we will see examples of all that in the next video,
157
00:08:06,730 --> 00:08:09,023
when we're gonna go back to coding.
158
00:08:10,230 --> 00:08:13,930
So to recap, let and const variables
159
00:08:13,930 --> 00:08:17,260
as well as functions are block scoped.
160
00:08:17,260 --> 00:08:20,440
And if you already know other programming languages,
161
00:08:20,440 --> 00:08:23,090
block scoping is probably more in line
162
00:08:23,090 --> 00:08:25,230
with what you already know.
163
00:08:25,230 --> 00:08:28,680
Function scopes are weird for some beginners
164
00:08:28,680 --> 00:08:30,400
in the JavaScript world.
165
00:08:30,400 --> 00:08:35,070
And that's why block scopes were introduced in ES6.
166
00:08:35,070 --> 00:08:38,440
But now to understand all this a little bit better,
167
00:08:38,440 --> 00:08:42,560
let's actually look at a more real and detailed example
168
00:08:42,560 --> 00:08:45,493
and also learn about the scope chain.
169
00:08:47,520 --> 00:08:50,520
And here we have some code with different functions
170
00:08:50,520 --> 00:08:51,650
and blocks,
171
00:08:51,650 --> 00:08:53,720
and we're gonna take a look at the scopes
172
00:08:53,720 --> 00:08:58,330
that are in this code as well as build the scope chain.
173
00:08:58,330 --> 00:09:02,290
And of course, we start with the global scope.
174
00:09:02,290 --> 00:09:05,030
As you can see, the myName variable
175
00:09:05,030 --> 00:09:07,360
is the only variable declaration
176
00:09:07,360 --> 00:09:10,100
that we have in the global scope.
177
00:09:10,100 --> 00:09:12,600
Now, technically, the first function
178
00:09:12,600 --> 00:09:14,700
also counts as a variable
179
00:09:14,700 --> 00:09:17,010
that is present in the global scope,
180
00:09:17,010 --> 00:09:18,870
but I want to keep it simple here.
181
00:09:18,870 --> 00:09:22,180
And so I will only consider variable declarations
182
00:09:22,180 --> 00:09:24,510
and no functions, all right?
183
00:09:24,510 --> 00:09:27,500
Just keep in mind that whatever I'm explaining here
184
00:09:27,500 --> 00:09:31,363
for variables also works the same for functions.
185
00:09:32,310 --> 00:09:35,020
Anyway, inside the global scope,
186
00:09:35,020 --> 00:09:38,220
we have a scope for the first function
187
00:09:38,220 --> 00:09:42,820
because each function creates its own scope, remember?
188
00:09:42,820 --> 00:09:44,970
And what's in the scope?
189
00:09:44,970 --> 00:09:47,870
Well, it's to age variable that's declared
190
00:09:47,870 --> 00:09:50,500
right at the top of the function.
191
00:09:50,500 --> 00:09:52,960
Next inside the first scope,
192
00:09:52,960 --> 00:09:55,670
let's now consider the second function,
193
00:09:55,670 --> 00:09:58,270
which will also create its own scope
194
00:09:58,270 --> 00:10:01,820
containing the job variable set to teacher.
195
00:10:01,820 --> 00:10:03,060
So as you see,
196
00:10:03,060 --> 00:10:06,400
we have a nested structure of scopes
197
00:10:06,400 --> 00:10:09,490
with one scope inside the other.
198
00:10:09,490 --> 00:10:12,680
But now comes the actually interesting part.
199
00:10:12,680 --> 00:10:15,200
Because here in the second function,
200
00:10:15,200 --> 00:10:17,180
we have this line of code
201
00:10:17,180 --> 00:10:19,810
where we need the myName variable
202
00:10:19,810 --> 00:10:21,610
and the age variable,
203
00:10:21,610 --> 00:10:26,070
which were both not declared inside the current scope.
204
00:10:26,070 --> 00:10:28,720
But we really need these variables here,
205
00:10:28,720 --> 00:10:33,530
because otherwise we can't create this string here, right?
206
00:10:33,530 --> 00:10:35,700
So how can this be fixed?
207
00:10:35,700 --> 00:10:38,890
How will the JavaScript engine know the values
208
00:10:38,890 --> 00:10:40,970
of these variables?
209
00:10:40,970 --> 00:10:43,730
Well, the secret is that every scope
210
00:10:43,730 --> 00:10:46,520
always has access to all the variables
211
00:10:46,520 --> 00:10:49,050
from all its outer scopes.
212
00:10:49,050 --> 00:10:51,710
So from all its parent scopes.
213
00:10:51,710 --> 00:10:54,970
In our example, this means that the second scope
214
00:10:54,970 --> 00:10:57,950
can access the age variable from the scope
215
00:10:57,950 --> 00:10:59,900
of the first function.
216
00:10:59,900 --> 00:11:03,010
Of course, this also means that the first scope
217
00:11:03,010 --> 00:11:06,690
can access variables that are in the global scope,
218
00:11:06,690 --> 00:11:09,560
because that is the parent scope.
219
00:11:09,560 --> 00:11:11,480
As a consequence of this,
220
00:11:11,480 --> 00:11:14,870
the second scope will then also be able to access
221
00:11:14,870 --> 00:11:18,140
the myName variable from the global scope,
222
00:11:18,140 --> 00:11:21,030
because it has access to the variables
223
00:11:21,030 --> 00:11:22,713
from the first scope.
224
00:11:23,670 --> 00:11:28,180
And by the way, all this also applies to function arguments.
225
00:11:28,180 --> 00:11:31,043
But in this example, we just don't have any.
226
00:11:31,900 --> 00:11:36,590
And this is essentially how the scope chain works.
227
00:11:36,590 --> 00:11:37,650
In other words,
228
00:11:37,650 --> 00:11:41,130
if one scope needs to use a certain variable,
229
00:11:41,130 --> 00:11:43,940
but cannot find it in the current scope,
230
00:11:43,940 --> 00:11:46,460
it will look up in the scope chain
231
00:11:46,460 --> 00:11:48,840
and see if it can find a variable
232
00:11:48,840 --> 00:11:51,060
in one of the parent scopes.
233
00:11:51,060 --> 00:11:54,160
If it can, it will then use that variable.
234
00:11:54,160 --> 00:11:57,620
And if it can't, then there will be an error.
235
00:11:57,620 --> 00:12:00,503
And this process is called variable lookup.
236
00:12:01,870 --> 00:12:04,710
Now it's important to note that these variables
237
00:12:04,710 --> 00:12:09,460
are not copied from one scope to another, okay?
238
00:12:09,460 --> 00:12:13,190
Instead, scopes simply look up in the scope chain
239
00:12:13,190 --> 00:12:15,970
until they find a variable that they need
240
00:12:15,970 --> 00:12:17,940
and then they use it.
241
00:12:17,940 --> 00:12:20,760
What's also extremely important to note
242
00:12:20,760 --> 00:12:24,240
is that this does not work the other way around.
243
00:12:24,240 --> 00:12:27,560
A certain scope will never, ever have access
244
00:12:27,560 --> 00:12:29,940
to the variables of an inner scope.
245
00:12:29,940 --> 00:12:33,650
In this example, the first scope, for example,
246
00:12:33,650 --> 00:12:36,900
will never get access to the job variable
247
00:12:36,900 --> 00:12:40,840
that is stored in the second scope, okay?
248
00:12:40,840 --> 00:12:45,460
So again, one scope can only look up in a scope chain,
249
00:12:45,460 --> 00:12:48,520
but it cannot look down basically.
250
00:12:48,520 --> 00:12:50,840
So only parent scope can be used,
251
00:12:50,840 --> 00:12:52,603
but no child scopes.
252
00:12:53,450 --> 00:12:56,220
Anyway, with all this in place now,
253
00:12:56,220 --> 00:12:58,690
this line of code can be executed
254
00:12:58,690 --> 00:13:00,400
and print to the console.
255
00:13:00,400 --> 00:13:03,390
Jonas is a 30 year old teacher,
256
00:13:03,390 --> 00:13:06,460
even though the myName and age variables
257
00:13:06,460 --> 00:13:09,260
were not defined in the current scope.
258
00:13:09,260 --> 00:13:13,950
All the engine did was to get them from the scope chain.
259
00:13:13,950 --> 00:13:16,140
And as you might be noticing,
260
00:13:16,140 --> 00:13:20,180
we have actually already done this before in our own code.
261
00:13:20,180 --> 00:13:23,520
We just didn't really understand what was going on
262
00:13:23,520 --> 00:13:25,300
and how it all worked.
263
00:13:25,300 --> 00:13:27,940
But now we do know how it works.
264
00:13:27,940 --> 00:13:29,233
Amazing, right?
265
00:13:30,180 --> 00:13:33,870
Anyway, we still have one more scope left here,
266
00:13:33,870 --> 00:13:36,993
and that's the one created by this block here.
267
00:13:38,010 --> 00:13:40,880
Remember that starting with ES6,
268
00:13:40,880 --> 00:13:45,130
not only functions create scopes, but also blocks.
269
00:13:45,130 --> 00:13:49,810
However, these scopes only work for the ES6 variable types.
270
00:13:49,810 --> 00:13:52,930
So for let and const variables.
271
00:13:52,930 --> 00:13:56,010
That's why the only variable that's in the scope
272
00:13:56,010 --> 00:13:58,480
is the decade variable.
273
00:13:58,480 --> 00:14:02,650
The millennial variable isn't declared with const or let,
274
00:14:02,650 --> 00:14:07,380
and therefore it is not scoped to just this block.
275
00:14:07,380 --> 00:14:11,270
Instead, the millennial variable is actually part
276
00:14:11,270 --> 00:14:13,580
of the first function scope.
277
00:14:13,580 --> 00:14:17,780
So again, for a variable declared with var,
278
00:14:17,780 --> 00:14:20,490
block scopes don't apply at all.
279
00:14:20,490 --> 00:14:24,160
They are functions scoped, not block scoped.
280
00:14:24,160 --> 00:14:26,700
Let and const on the other hand
281
00:14:26,700 --> 00:14:30,440
are in fact blocks scoped, okay?
282
00:14:30,440 --> 00:14:32,690
This is one of the fundamental things
283
00:14:32,690 --> 00:14:36,710
that you need to keep in mind about let, const and var,
284
00:14:36,710 --> 00:14:39,760
and about scoping in general.
285
00:14:39,760 --> 00:14:43,280
So if you're taking notes and I hope you are taking
286
00:14:43,280 --> 00:14:44,970
lots of notes,
287
00:14:44,970 --> 00:14:47,543
then this must definitely be in there.
288
00:14:48,450 --> 00:14:50,330
Now about a scope chain,
289
00:14:50,330 --> 00:14:54,043
if the millennial variable is in the first function scope,
290
00:14:54,043 --> 00:14:57,010
then of course the second function scope
291
00:14:57,010 --> 00:14:59,130
also has access to it,
292
00:14:59,130 --> 00:15:02,550
even if it doesn't really need that variable.
293
00:15:02,550 --> 00:15:04,810
Also the scope chain does of course,
294
00:15:04,810 --> 00:15:07,500
apply to block scopes as well.
295
00:15:07,500 --> 00:15:10,400
And therefore in or if block scope,
296
00:15:10,400 --> 00:15:13,120
we get access to all the variables
297
00:15:13,120 --> 00:15:15,670
from all its outer scopes.
298
00:15:15,670 --> 00:15:17,950
So from the first function scope,
299
00:15:17,950 --> 00:15:20,890
and of course from the global scope.
300
00:15:20,890 --> 00:15:23,090
That's why I said in the last slide
301
00:15:23,090 --> 00:15:25,110
that variables in a global scope
302
00:15:25,110 --> 00:15:27,640
are accessible from everywhere.
303
00:15:27,640 --> 00:15:29,760
They are, because they are always
304
00:15:29,760 --> 00:15:32,290
at the top of the scope chain.
305
00:15:32,290 --> 00:15:35,350
In fact, we call variables in the global scope,
306
00:15:35,350 --> 00:15:39,200
global variables, very creative, right?
307
00:15:39,200 --> 00:15:43,670
But we actually use this term a lot in JavaScript.
308
00:15:43,670 --> 00:15:45,630
Now it's important to understand
309
00:15:45,630 --> 00:15:47,890
that our purple blocks scope
310
00:15:47,890 --> 00:15:50,920
does not get access to any variables
311
00:15:50,920 --> 00:15:53,890
from the yellow second function scope.
312
00:15:53,890 --> 00:15:56,240
And the same, the other way around.
313
00:15:56,240 --> 00:15:58,070
And why is that?
314
00:15:58,070 --> 00:16:00,920
Well it's because of lexical scoping
315
00:16:00,920 --> 00:16:03,230
as we learned in the last slide.
316
00:16:03,230 --> 00:16:05,710
So the way that we can access variables
317
00:16:05,710 --> 00:16:08,660
depends on where the scope is placed,
318
00:16:08,660 --> 00:16:11,650
so where it is written in the code.
319
00:16:11,650 --> 00:16:14,730
In this case, none of these two scopes is written
320
00:16:14,730 --> 00:16:17,110
inside of one another.
321
00:16:17,110 --> 00:16:20,810
They're both child scopes of the first function.
322
00:16:20,810 --> 00:16:24,400
We could even say that they are a sibling scopes.
323
00:16:24,400 --> 00:16:27,250
And so by the rules of lexical scoping,
324
00:16:27,250 --> 00:16:31,070
they cannot have access to each others variables,
325
00:16:31,070 --> 00:16:35,530
simply because one is not written inside the other one.
326
00:16:35,530 --> 00:16:37,540
We can also say that the scope chain
327
00:16:37,540 --> 00:16:40,803
only works upwards, not sideways.
328
00:16:41,860 --> 00:16:45,200
Okay, so this was a lot to take in,
329
00:16:45,200 --> 00:16:48,430
but I hope that everything's still keeps making sense
330
00:16:48,430 --> 00:16:49,670
at this point.
331
00:16:49,670 --> 00:16:51,400
And if not, don't worry,
332
00:16:51,400 --> 00:16:54,010
we will see all this working in practice
333
00:16:54,010 --> 00:16:56,060
in the next video.
334
00:16:56,060 --> 00:16:57,380
But for now, though,
335
00:16:57,380 --> 00:17:00,350
there is one more thing that we need to talk about,
336
00:17:00,350 --> 00:17:03,010
which is the difference between the scope chain
337
00:17:03,010 --> 00:17:04,740
and to call stack.
338
00:17:04,740 --> 00:17:08,360
I get a lot of questions about this all the time.
339
00:17:08,360 --> 00:17:10,840
And so I decided to talk about
340
00:17:10,840 --> 00:17:13,900
how the call stack, execution context,
341
00:17:13,900 --> 00:17:16,360
variable environments and scope
342
00:17:16,360 --> 00:17:19,310
are all related to one another.
343
00:17:19,310 --> 00:17:22,470
So before we move on to the next video.
344
00:17:22,470 --> 00:17:23,303
And once more,
345
00:17:23,303 --> 00:17:25,703
let's look at some more code here.
346
00:17:26,720 --> 00:17:31,550
So we have three functions called first, second and third,
347
00:17:31,550 --> 00:17:34,760
in order to make this easier to understand.
348
00:17:34,760 --> 00:17:37,430
We start by calling the first function,
349
00:17:37,430 --> 00:17:39,730
which then calls the second function,
350
00:17:39,730 --> 00:17:42,950
which in turn calls the third function.
351
00:17:42,950 --> 00:17:45,130
So from what we learned before,
352
00:17:45,130 --> 00:17:50,130
the call stack for this example will look like this, right?
353
00:17:50,780 --> 00:17:53,870
One execution context for each function
354
00:17:53,870 --> 00:17:57,250
in the exact order in which they were called.
355
00:17:57,250 --> 00:17:59,910
They also included the variable environment
356
00:17:59,910 --> 00:18:02,570
of each execution context.
357
00:18:02,570 --> 00:18:06,010
For now, all this has nothing to do with scopes
358
00:18:06,010 --> 00:18:08,490
or the scope chain, all right?
359
00:18:08,490 --> 00:18:12,000
All I'm doing is creating one execution context
360
00:18:12,000 --> 00:18:14,560
for each function call and filling it
361
00:18:14,560 --> 00:18:17,820
with the variables of that function.
362
00:18:17,820 --> 00:18:20,410
And you can pause the video here for a moment
363
00:18:20,410 --> 00:18:24,003
to understand the content of each variable environment.
364
00:18:25,440 --> 00:18:28,120
Okay, and now that you did that
365
00:18:28,120 --> 00:18:31,770
and we have all these variable environments in place,
366
00:18:31,770 --> 00:18:35,250
we can actually start building the scope chain.
367
00:18:35,250 --> 00:18:39,300
As always, we're gonna start with the global scope.
368
00:18:39,300 --> 00:18:42,390
And the variables available in the global scope
369
00:18:42,390 --> 00:18:46,360
are exactly the ones stored in the variable environment
370
00:18:46,360 --> 00:18:49,160
of the global execution context.
371
00:18:49,160 --> 00:18:52,020
And given everything we've learned so far,
372
00:18:52,020 --> 00:18:54,670
that makes sense, right?
373
00:18:54,670 --> 00:18:56,800
And note that in this example,
374
00:18:56,800 --> 00:19:00,640
I am actually including functions in each scope
375
00:19:00,640 --> 00:19:03,283
unlike we did in the previous slide.
376
00:19:04,150 --> 00:19:08,110
Now in the global scope, we also call the first function,
377
00:19:08,110 --> 00:19:11,880
which is the reason why we have an execution context for it
378
00:19:11,880 --> 00:19:13,530
in the call stack.
379
00:19:13,530 --> 00:19:17,260
And this function of course, also gets its own scope,
380
00:19:17,260 --> 00:19:20,140
which contains all the variables that are declared
381
00:19:20,140 --> 00:19:22,620
inside of the function.
382
00:19:22,620 --> 00:19:26,100
And once again, this is exactly the same
383
00:19:26,100 --> 00:19:27,900
as the variable environment
384
00:19:27,900 --> 00:19:30,820
of the functions execution context.
385
00:19:30,820 --> 00:19:32,930
However, that's not all
386
00:19:32,930 --> 00:19:36,550
because now we already know about the scope chain.
387
00:19:36,550 --> 00:19:40,740
So the first scope also gets access to all the variables
388
00:19:40,740 --> 00:19:42,440
from its parent scope,
389
00:19:42,440 --> 00:19:44,353
thanks to the scope chain.
390
00:19:45,220 --> 00:19:46,860
Now, as we already know,
391
00:19:46,860 --> 00:19:49,530
the scope chain is all about the order
392
00:19:49,530 --> 00:19:53,080
in which functions are written in the code.
393
00:19:53,080 --> 00:19:55,450
But what's really important to note here
394
00:19:55,450 --> 00:19:59,400
is that the scope chain has nothing to do with the order
395
00:19:59,400 --> 00:20:01,370
in which functions were called.
396
00:20:01,370 --> 00:20:05,180
Or in other words, the scope chain has nothing to do
397
00:20:05,180 --> 00:20:10,180
with the order of the execution contexts in the call stack.
398
00:20:10,280 --> 00:20:13,590
The scope chain does get the variable environments
399
00:20:13,590 --> 00:20:17,960
from the execution context as shown by the red arrows here,
400
00:20:17,960 --> 00:20:19,520
but that's it.
401
00:20:19,520 --> 00:20:22,870
The order of function calls is not relevant
402
00:20:22,870 --> 00:20:26,120
to the scope chain at all, all right?
403
00:20:26,120 --> 00:20:28,550
Really keep that in mind.
404
00:20:28,550 --> 00:20:32,000
Now, moving on to the second function now,
405
00:20:32,000 --> 00:20:37,000
once again, its scope is equal to its variable environment.
406
00:20:37,280 --> 00:20:41,650
Also it's lexically written within the first function.
407
00:20:41,650 --> 00:20:43,000
And so of course,
408
00:20:43,000 --> 00:20:47,120
it will have access to all its parent scopes as well.
409
00:20:47,120 --> 00:20:50,570
So we can say that the scope chain in a certain scope
410
00:20:50,570 --> 00:20:54,640
is equal to adding together all the variable environments
411
00:20:54,640 --> 00:20:57,000
of all the parent scopes.
412
00:20:57,000 --> 00:20:58,790
And so this is our scope,
413
00:20:58,790 --> 00:21:02,230
and the scope chain are built in the JavaScript engine
414
00:21:02,230 --> 00:21:03,663
behind the scenes.
415
00:21:04,650 --> 00:21:05,650
Okay.
416
00:21:05,650 --> 00:21:07,700
Now in the second function,
417
00:21:07,700 --> 00:21:11,220
we try to call the third function.
418
00:21:11,220 --> 00:21:13,270
But why does that work?
419
00:21:13,270 --> 00:21:16,150
Well, it works because the third function
420
00:21:16,150 --> 00:21:20,010
is in the scope chain of the second function scope
421
00:21:20,010 --> 00:21:23,770
as we can see here in our scope chain diagram.
422
00:21:23,770 --> 00:21:28,470
It's a function in the global scope or a global function,
423
00:21:28,470 --> 00:21:32,030
and therefore it's accessible everywhere.
424
00:21:32,030 --> 00:21:34,740
Of course, this will create a new scope
425
00:21:34,740 --> 00:21:38,363
along with the scope chain as we already know.
426
00:21:39,230 --> 00:21:43,330
Great, so what happens in this third function?
427
00:21:43,330 --> 00:21:47,120
Well, we're trying to act as variables B, C,
428
00:21:47,120 --> 00:21:49,750
D and A here.
429
00:21:49,750 --> 00:21:53,160
D is no problem because it's right there
430
00:21:53,160 --> 00:21:55,330
in the third function scope.
431
00:21:55,330 --> 00:21:57,610
So that one is easy.
432
00:21:57,610 --> 00:22:01,460
Then variable C is not in a local scope
433
00:22:01,460 --> 00:22:05,460
and so JavaScript needs to do a variable lookup.
434
00:22:05,460 --> 00:22:07,810
So it looks up in a scope chain
435
00:22:07,810 --> 00:22:10,120
looking for variable C,
436
00:22:10,120 --> 00:22:12,300
but it's not there.
437
00:22:12,300 --> 00:22:14,010
And of course it isn't,
438
00:22:14,010 --> 00:22:17,510
because C is defined in the second function,
439
00:22:17,510 --> 00:22:20,980
and there is just no way in which the third function
440
00:22:20,980 --> 00:22:25,420
can access variables defined in the second function.
441
00:22:25,420 --> 00:22:26,540
And that is true,
442
00:22:26,540 --> 00:22:30,640
even though it was the second function who called the third.
443
00:22:30,640 --> 00:22:32,780
And so here is even more proof
444
00:22:32,780 --> 00:22:35,400
that the order in which functions are called
445
00:22:35,400 --> 00:22:38,840
does not affect the scope chain at all.
446
00:22:38,840 --> 00:22:40,970
And so here as a result,
447
00:22:40,970 --> 00:22:42,990
we get the reference error
448
00:22:42,990 --> 00:22:46,700
because both C and B cannot be found
449
00:22:46,700 --> 00:22:50,063
in the third scope nor in the scope chain.
450
00:22:51,030 --> 00:22:51,863
Okay.
451
00:22:51,863 --> 00:22:54,810
And with this, I hope I made it crystal clear
452
00:22:54,810 --> 00:22:58,540
that execution context, variable environments,
453
00:22:58,540 --> 00:23:03,240
the call stack scope and the scope chain are all different,
454
00:23:03,240 --> 00:23:06,040
but still very related concepts.
455
00:23:06,040 --> 00:23:08,450
And if it's not yet crystal clear,
456
00:23:08,450 --> 00:23:12,220
then it's no problem to maybe rewatch this slide,
457
00:23:12,220 --> 00:23:15,423
or maybe even this entire lecture a little bit later.
458
00:23:16,540 --> 00:23:19,830
And I know that this was quite a long lecture
459
00:23:19,830 --> 00:23:23,000
with a ton of stuff to take in.
460
00:23:23,000 --> 00:23:25,250
And so here is a handy summary
461
00:23:25,250 --> 00:23:28,830
with the main takeaways from this video.
462
00:23:28,830 --> 00:23:32,667
So to start, scoping asks the question,
463
00:23:32,667 --> 00:23:34,990
"Where do variables live?"
464
00:23:34,990 --> 00:23:38,277
Or "Where can we access a certain variable,
465
00:23:38,277 --> 00:23:39,860
"and where not?"
466
00:23:39,860 --> 00:23:42,623
That's what scoping is all about.
467
00:23:43,480 --> 00:23:47,230
Now, there are three types scope in JavaScript.
468
00:23:47,230 --> 00:23:50,810
The global scope, scopes defined by functions
469
00:23:50,810 --> 00:23:55,570
and scopes defined by blocks, starting in ES6.
470
00:23:55,570 --> 00:24:00,200
However, only let and const variables are block scoped.
471
00:24:00,200 --> 00:24:04,030
Variables declared with var automatically end up
472
00:24:04,030 --> 00:24:05,993
in the closest function scope.
473
00:24:06,830 --> 00:24:10,590
Next in JavaScript, we have lexical scoping,
474
00:24:10,590 --> 00:24:14,580
which means that the rules of where we can access variables
475
00:24:14,580 --> 00:24:17,100
are based on where in the code functions
476
00:24:17,100 --> 00:24:18,943
and blocks are written.
477
00:24:19,820 --> 00:24:22,580
And now, let the magic begin,
478
00:24:22,580 --> 00:24:25,820
because every scope always has access
479
00:24:25,820 --> 00:24:29,710
to all the variables from all it's outer scopes.
480
00:24:29,710 --> 00:24:32,890
And this is what we call the scope chain.
481
00:24:32,890 --> 00:24:36,630
When a certain variable is not in the current scope,
482
00:24:36,630 --> 00:24:39,150
the engine looks up in the scope chain
483
00:24:39,150 --> 00:24:42,630
until it finds the variable that it's looking for,
484
00:24:42,630 --> 00:24:46,240
and this process is called variable lookup.
485
00:24:46,240 --> 00:24:48,720
It's important to note that the scope chain
486
00:24:48,720 --> 00:24:50,850
is a one way street.
487
00:24:50,850 --> 00:24:55,300
So a scope will never ever have access to the variables
488
00:24:55,300 --> 00:24:59,620
of an inner scope, only of outer scopes.
489
00:24:59,620 --> 00:25:03,490
We can also think of the scope chain in a certain scope
490
00:25:03,490 --> 00:25:05,690
as being equal to adding together
491
00:25:05,690 --> 00:25:10,280
all the variable environments of all the parent scopes.
492
00:25:10,280 --> 00:25:12,780
And finally, we need to keep in mind
493
00:25:12,780 --> 00:25:15,350
that the scope chain has nothing to do
494
00:25:15,350 --> 00:25:18,970
with the order in which functions were called.
495
00:25:18,970 --> 00:25:21,460
So the order of function calls
496
00:25:21,460 --> 00:25:24,343
does not affect the scope chain at all.
497
00:25:25,260 --> 00:25:27,920
Okay, and now that's actually it.
498
00:25:27,920 --> 00:25:32,410
This is in a nutshell, scoping in JavaScript.
499
00:25:32,410 --> 00:25:34,363
See you in the next video.
36988
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.