Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,410 --> 00:00:04,220
Let's now create two more situations
2
2
00:00:04,220 --> 00:00:06,920
in which closures are gonna appear.
3
3
00:00:06,920 --> 00:00:10,030
So that you can start identifying closures
4
4
00:00:10,030 --> 00:00:12,063
in your own code in the future.
5
5
00:00:13,810 --> 00:00:16,960
And both of these examples are gonna demonstrate
6
6
00:00:16,960 --> 00:00:19,300
that we don't need to return if function
7
7
00:00:19,300 --> 00:00:23,120
from another function in order to create a closure.
8
8
00:00:23,120 --> 00:00:28,120
All right, so let's start with our first example here.
9
9
00:00:28,190 --> 00:00:32,540
I'm gonna start by defining an empty variable called f
10
10
00:00:34,510 --> 00:00:36,913
and then a function expression g.
11
11
00:00:42,350 --> 00:00:44,410
So these are just some generic names
12
12
00:00:45,760 --> 00:00:48,573
because what the functions do here don't really matter.
13
13
00:00:50,060 --> 00:00:53,620
Then in here, I defined this a variable
14
14
00:00:53,620 --> 00:00:57,543
and then I'm going to reassign the F variable
15
15
00:00:57,543 --> 00:00:59,980
that we created out here.
16
16
00:00:59,980 --> 00:01:02,533
And I'm gonna assign it a function value.
17
17
00:01:04,660 --> 00:01:07,870
And this function will then simply log
18
18
00:01:07,870 --> 00:01:10,490
the a variable to the console
19
19
00:01:10,490 --> 00:01:11,923
let's say times two.
20
20
00:01:12,830 --> 00:01:15,833
Okay, and that's it for now at least.
21
21
00:01:17,300 --> 00:01:20,740
So let's try to call g
22
22
00:01:22,430 --> 00:01:24,710
so that's gonna be dispersed function.
23
23
00:01:24,710 --> 00:01:29,280
And so the result of this function is that a will be 23
24
24
00:01:29,280 --> 00:01:32,870
and that F variable that we have out here
25
25
00:01:32,870 --> 00:01:34,970
will become this function.
26
26
00:01:34,970 --> 00:01:39,970
And so after g we can then call F.
27
27
00:01:39,970 --> 00:01:40,903
So let's try that.
28
28
00:01:41,770 --> 00:01:46,770
And we get 46 which is indeed 23 times two, all right.
29
29
00:01:48,850 --> 00:01:53,030
And so what this proves is that this F value here
30
30
00:01:53,030 --> 00:01:57,730
so this F function really does close over any variables
31
31
00:01:57,730 --> 00:02:01,950
of the execution context in which it was defined.
32
32
00:02:01,950 --> 00:02:06,290
And that is true even when the variable itself.
33
33
00:02:06,290 --> 00:02:11,080
So F here was technically not even defined inside
34
34
00:02:11,080 --> 00:02:14,710
of this variable environment here, right.
35
35
00:02:14,710 --> 00:02:17,440
So this F variable was defined outside here
36
36
00:02:17,440 --> 00:02:20,410
in the global scope, it was created here
37
37
00:02:20,410 --> 00:02:23,530
but then as we assigned it a function here
38
38
00:02:23,530 --> 00:02:25,960
in this the g function,
39
39
00:02:25,960 --> 00:02:27,840
so right here at instill closed
40
40
00:02:27,840 --> 00:02:31,390
over the variable environment of the g function.
41
41
00:02:31,390 --> 00:02:34,330
And that includes this a variable.
42
42
00:02:34,330 --> 00:02:38,230
And therefore it is able to access this a variable here
43
43
00:02:38,230 --> 00:02:41,730
even after the g function here at this point
44
44
00:02:41,730 --> 00:02:46,170
has of course already finished its execution, right.
45
45
00:02:46,170 --> 00:02:49,500
So that's just what we learned in the last lecture.
46
46
00:02:49,500 --> 00:02:51,490
So at this point of the execution,
47
47
00:02:51,490 --> 00:02:56,490
the variable environment of g is no longer there, right.
48
48
00:02:56,760 --> 00:02:59,960
But f, so this function here closed over
49
49
00:02:59,960 --> 00:03:03,620
that variable environment and therefore it is able
50
50
00:03:03,620 --> 00:03:06,283
to access the a variable.
51
51
00:03:08,030 --> 00:03:11,670
So basically using the analogy of or less video,
52
52
00:03:11,670 --> 00:03:16,670
the a variable is inside the backpack of the f function.
53
53
00:03:17,480 --> 00:03:20,670
But now let's take it to the next level
54
54
00:03:20,670 --> 00:03:22,503
and create a new function here.
55
55
00:03:25,320 --> 00:03:29,540
So that's h and it's gonna be very similar.
56
56
00:03:29,540 --> 00:03:34,540
All it's gonna do is to define b as some other value,
57
57
00:03:35,060 --> 00:03:39,340
let's say this and then we will again,
58
58
00:03:39,340 --> 00:03:42,193
reassign f, right here.
59
59
00:03:43,250 --> 00:03:46,500
So let's call this one a b now of course.
60
60
00:03:46,500 --> 00:03:49,950
So this one here will then try to access b
61
61
00:03:49,950 --> 00:03:51,423
and multiply by two.
62
62
00:03:52,800 --> 00:03:56,110
Okay, and so what I want to see with this
63
63
00:03:56,110 --> 00:03:59,300
is what happens when we assign the f value
64
64
00:03:59,300 --> 00:04:00,573
a second function.
65
65
00:04:01,580 --> 00:04:06,580
Okay, so here we call g and so g will then assign to
66
66
00:04:06,680 --> 00:04:09,810
or empty variable this f function.
67
67
00:04:09,810 --> 00:04:14,810
Okay, and then if we call h afterwards
68
68
00:04:14,910 --> 00:04:18,640
or actually let's do it after calling f for the first time.
69
69
00:04:18,640 --> 00:04:21,500
So as we then call h then the f variable
70
70
00:04:21,500 --> 00:04:23,680
will be assigned again.
71
71
00:04:23,680 --> 00:04:26,713
So then a second function which is this one here.
72
72
00:04:27,780 --> 00:04:31,890
And so what I want to see is what f does then.
73
73
00:04:31,890 --> 00:04:33,270
So let's see.
74
74
00:04:33,270 --> 00:04:36,860
And again, keeping in mind that F at this point
75
75
00:04:36,860 --> 00:04:39,510
is a different function than this one here
76
76
00:04:39,510 --> 00:04:42,203
because it was reassigned by h.
77
77
00:04:43,210 --> 00:04:44,493
We just write that here.
78
78
00:04:51,520 --> 00:04:56,520
Okay, and now we get 1554 which is probably 777 times two
79
79
00:05:00,530 --> 00:05:02,140
and indeed it is.
80
80
00:05:02,140 --> 00:05:05,520
And so this proves that the f function
81
81
00:05:05,520 --> 00:05:07,240
it was reassigned here
82
82
00:05:07,240 --> 00:05:11,560
also closed over the variable environment of h.
83
83
00:05:11,560 --> 00:05:15,180
And so that's how it can access then the b variable here
84
84
00:05:15,180 --> 00:05:17,163
which has set to 777.
85
85
00:05:18,120 --> 00:05:22,390
So let's actually inspect the variable environment like
86
86
00:05:22,390 --> 00:05:24,643
we did by the end of the last video.
87
87
00:05:25,930 --> 00:05:30,930
So of f and then we will be able to see that in the closure,
88
88
00:05:34,000 --> 00:05:37,490
it does indeed have the value of b
89
89
00:05:37,490 --> 00:05:40,930
and it now no longer has the value of a.
90
90
00:05:40,930 --> 00:05:44,950
So after the closure that it used to have before.
91
91
00:05:44,950 --> 00:05:47,530
So at this point here at the closure contained
92
92
00:05:47,530 --> 00:05:52,530
the value a and we can of course also see that.
93
93
00:05:53,400 --> 00:05:58,400
So at this point in time, the closure is indeed a 23, right.
94
94
00:06:04,350 --> 00:06:09,350
And so then as we reassign the function to a new value,
95
95
00:06:09,350 --> 00:06:12,820
then that old closure basically disappears
96
96
00:06:12,820 --> 00:06:16,363
and now the closure is b.
97
97
00:06:17,260 --> 00:06:20,150
So this variable here of the birthplace
98
98
00:06:20,150 --> 00:06:22,630
where it was reassigned.
99
99
00:06:22,630 --> 00:06:25,770
And this is really fascinating in my opinion
100
100
00:06:25,770 --> 00:06:28,160
that the closure can change like this
101
101
00:06:28,160 --> 00:06:30,670
as the variable is reassigned.
102
102
00:06:30,670 --> 00:06:34,640
So it really is true that a closure always makes sure
103
103
00:06:34,640 --> 00:06:37,720
that a function does not lose the connection
104
104
00:06:37,720 --> 00:06:41,760
to the variables that were present at its birthplace.
105
105
00:06:41,760 --> 00:06:44,000
So it's always gonna remember them.
106
106
00:06:44,000 --> 00:06:45,940
In our case here, the function
107
107
00:06:45,940 --> 00:06:49,510
was kind of born inside of g first
108
108
00:06:49,510 --> 00:06:54,050
and then it was essentially reborn again in h.
109
109
00:06:54,050 --> 00:06:57,490
And so first the closure contained the a variable
110
110
00:06:57,490 --> 00:06:59,450
of its first birthplace.
111
111
00:06:59,450 --> 00:07:03,920
And then as it was reborn to follow our analogy
112
112
00:07:03,920 --> 00:07:08,500
then it remembered this B variable off its birthplace.
113
113
00:07:08,500 --> 00:07:13,253
Okay, so this was example one.
114
114
00:07:14,250 --> 00:07:17,513
Let's now create another example.
115
115
00:07:21,540 --> 00:07:24,690
Okay, so I hope the first one was clear here.
116
116
00:07:24,690 --> 00:07:26,670
So whenever something like this happens
117
117
00:07:26,670 --> 00:07:30,690
where your reassigned functions even without returning them,
118
118
00:07:30,690 --> 00:07:33,940
keep in mind that also this will create a closure
119
119
00:07:35,760 --> 00:07:39,130
but now moving on to our second example here
120
120
00:07:39,130 --> 00:07:41,410
and that's gonna be a timer.
121
121
00:07:41,410 --> 00:07:43,950
So a timer is another great example
122
122
00:07:43,950 --> 00:07:46,460
that we don't need to return a function
123
123
00:07:46,460 --> 00:07:48,423
to see a closure in action.
124
124
00:07:49,960 --> 00:07:54,373
So here I'm going back to the example of the airline.
125
125
00:07:57,300 --> 00:08:01,320
So creating a function called board passengers
126
126
00:08:03,940 --> 00:08:08,940
and then we get the number of passengers and a wait time.
127
127
00:08:10,710 --> 00:08:13,320
Then let's create a new variable in here
128
128
00:08:13,320 --> 00:08:14,723
which I'm calling perGroup.
129
129
00:08:16,520 --> 00:08:20,240
And that's because boarding usually happens in groups
130
130
00:08:20,240 --> 00:08:22,040
and we usually have three groups.
131
131
00:08:22,040 --> 00:08:24,700
So I'm gonna divide all the passengers.
132
132
00:08:24,700 --> 00:08:28,940
So the number of passengers that is boarding by three
133
133
00:08:30,460 --> 00:08:31,850
and by the end of this function,
134
134
00:08:31,850 --> 00:08:33,523
I want to lock to the console.
135
135
00:08:35,340 --> 00:08:40,340
We'll start boarding and then wait seconds, okay.
136
136
00:08:46,110 --> 00:08:48,840
And now let's actually use a timer
137
137
00:08:48,840 --> 00:08:52,157
and we haven't actually used a timer yet in this course.
138
138
00:08:52,157 --> 00:08:54,750
And we will learn more about them later
139
139
00:08:54,750 --> 00:08:56,670
but this is such a good use case
140
140
00:08:56,670 --> 00:09:00,010
that I wanted to use a timer now.
141
141
00:09:00,010 --> 00:09:01,830
And it's actually very simple.
142
142
00:09:01,830 --> 00:09:05,830
So we just use the set time out function
143
143
00:09:06,720 --> 00:09:09,650
and a set time out function needs two parameters.
144
144
00:09:09,650 --> 00:09:13,223
The first one is a function which will be executed, okay.
145
145
00:09:15,290 --> 00:09:19,610
And this function will be executed after a certain time.
146
146
00:09:19,610 --> 00:09:23,010
For example, we can specify a 1,000 milliseconds
147
147
00:09:23,010 --> 00:09:26,180
because the second argument here is milliseconds.
148
148
00:09:26,180 --> 00:09:28,530
And so that will mean that whatever code
149
149
00:09:28,530 --> 00:09:31,260
is inside of this function will be executed
150
150
00:09:31,260 --> 00:09:32,823
after one second.
151
151
00:09:34,070 --> 00:09:36,340
Let me actually do that out here
152
152
00:09:36,340 --> 00:09:38,653
just so you see this as an example.
153
153
00:09:42,950 --> 00:09:45,730
So if I saved us now wait one second
154
154
00:09:45,730 --> 00:09:47,800
and then here you see timer appearing.
155
155
00:09:47,800 --> 00:09:49,150
So I'm gonna do that again.
156
156
00:09:50,470 --> 00:09:53,920
Okay, so you'll see that after this one second,
157
157
00:09:53,920 --> 00:09:56,060
this function was executed.
158
158
00:09:56,060 --> 00:09:59,540
Okay, and so this, as we already learned before
159
159
00:09:59,540 --> 00:10:01,810
is essentially a callback function.
160
160
00:10:01,810 --> 00:10:05,210
And in this case it is literally called later.
161
161
00:10:05,210 --> 00:10:07,313
So in this case, after one second.
162
162
00:10:08,720 --> 00:10:11,663
So let's create or callback function here.
163
163
00:10:13,170 --> 00:10:15,560
And first I want to log to the console.
164
164
00:10:15,560 --> 00:10:20,560
We are now boarding all and then the n passengers.
165
165
00:10:25,330 --> 00:10:30,220
And so this n here is this parameter of the function.
166
166
00:10:30,220 --> 00:10:35,190
So of this parent function which essentially is the function
167
167
00:10:35,190 --> 00:10:38,480
or the scope in which this callback function here
168
168
00:10:38,480 --> 00:10:40,040
is being created.
169
169
00:10:40,040 --> 00:10:42,080
And so that will of course be important
170
170
00:10:42,080 --> 00:10:43,943
for our closure example.
171
171
00:10:46,066 --> 00:10:49,610
And then let's also use the perGroup variable now.
172
172
00:10:49,610 --> 00:10:54,597
There are three groups each with
173
173
00:11:00,640 --> 00:11:03,480
passengers, okay,
174
174
00:11:03,480 --> 00:11:06,870
that's our function and now let's call it.
175
175
00:11:06,870 --> 00:11:11,870
And here we want to specify wait and then times 1,000
176
176
00:11:12,690 --> 00:11:16,290
because we're gonna pass into wait in seconds.
177
177
00:11:16,290 --> 00:11:19,240
And this argument here needs to be in milliseconds
178
178
00:11:19,240 --> 00:11:21,863
and so we just multiply by 1,000.
179
179
00:11:23,730 --> 00:11:28,450
So board passengers, let's say we have 180 passengers
180
180
00:11:29,300 --> 00:11:32,700
and it takes two, let's say three seconds.
181
181
00:11:32,700 --> 00:11:36,170
So immediately when we call this function,
182
182
00:11:36,170 --> 00:11:38,210
this variable will be created
183
183
00:11:38,210 --> 00:11:40,580
then set time out will be called
184
184
00:11:40,580 --> 00:11:44,390
and it will basically register this callback function here.
185
185
00:11:44,390 --> 00:11:47,330
And then that will be called after three seconds.
186
186
00:11:47,330 --> 00:11:50,510
But immediately also this console.log here
187
187
00:11:50,510 --> 00:11:53,060
will be called, all right.
188
188
00:11:53,060 --> 00:11:57,750
So this console.log here will not wait these three seconds
189
189
00:11:57,750 --> 00:12:00,910
for these set time out callback to finish.
190
190
00:12:00,910 --> 00:12:05,730
Okay, so immediately this variable is created,
191
191
00:12:05,730 --> 00:12:09,180
this set timeout function is run and console.log is run.
192
192
00:12:09,180 --> 00:12:12,480
And then after three seconds, this function here
193
193
00:12:12,480 --> 00:12:13,870
will be executed.
194
194
00:12:13,870 --> 00:12:17,430
And so let's see what happens to the n variable
195
195
00:12:17,430 --> 00:12:20,673
and to the perGroup variable that is in this function.
196
196
00:12:23,040 --> 00:12:27,340
So immediately we got this log and then after three seconds,
197
197
00:12:27,340 --> 00:12:30,840
we are boarding all 180 and there are three groups
198
198
00:12:30,840 --> 00:12:33,870
with 60 passengers each.
199
199
00:12:33,870 --> 00:12:36,330
Okay, it worked.
200
200
00:12:36,330 --> 00:12:39,860
And again, keep in mind that this callback function here
201
201
00:12:39,860 --> 00:12:42,940
was executed completely independently
202
202
00:12:42,940 --> 00:12:45,570
from the board passengers function.
203
203
00:12:45,570 --> 00:12:48,470
All right, but still the callback function
204
204
00:12:48,470 --> 00:12:51,220
was able to use all the variables that were
205
205
00:12:51,220 --> 00:12:55,030
in the variable environment in which it was created.
206
206
00:12:55,030 --> 00:12:57,503
So that's n and perGroup.
207
207
00:12:59,000 --> 00:13:01,680
And one more time, this is a clear sign
208
208
00:13:01,680 --> 00:13:05,250
of a closure being created, right.
209
209
00:13:05,250 --> 00:13:08,660
So the only way in which this callback function here
210
210
00:13:08,660 --> 00:13:11,720
can have access to the variables that are defined
211
211
00:13:11,720 --> 00:13:13,473
in the board passengers function
212
212
00:13:13,473 --> 00:13:18,200
that has long finished execution is if it created a closure.
213
213
00:13:18,200 --> 00:13:20,310
And so that's exactly what happened.
214
214
00:13:20,310 --> 00:13:24,130
And yeah, that's how we got access to perGroup
215
215
00:13:24,130 --> 00:13:26,730
and also this argument of the function
216
216
00:13:26,730 --> 00:13:29,110
so this wait here, right.
217
217
00:13:29,110 --> 00:13:31,280
So as I mentioned in the last lecture,
218
218
00:13:31,280 --> 00:13:34,170
the closure of course also includes the arguments
219
219
00:13:34,170 --> 00:13:36,320
and that's because they are really just
220
220
00:13:36,320 --> 00:13:39,050
a local variables in the function.
221
221
00:13:39,050 --> 00:13:41,820
And to finish, let's now also prove
222
222
00:13:41,820 --> 00:13:45,470
that the closure does in fact have priority
223
223
00:13:45,470 --> 00:13:47,290
over the sculpt chain.
224
224
00:13:47,290 --> 00:13:49,590
So here in the global scope,
225
225
00:13:49,590 --> 00:13:54,323
I'm also gonna create a variable called perGroup equals
226
226
00:13:56,280 --> 00:13:59,254
and then just some value here.
227
227
00:13:59,254 --> 00:14:03,820
And so if the scope chain had priority over the closure,
228
228
00:14:03,820 --> 00:14:05,630
then this callback function here
229
229
00:14:05,630 --> 00:14:08,670
would indeed use this variable here
230
230
00:14:08,670 --> 00:14:10,120
this global variable
231
231
00:14:10,120 --> 00:14:12,620
because we can imagine this function here
232
232
00:14:12,620 --> 00:14:16,740
basically being executed in the global scope, okay.
233
233
00:14:16,740 --> 00:14:20,120
So if it wasn't for the closure it would use this.
234
234
00:14:20,120 --> 00:14:22,210
So let me actually demonstrate that to you.
235
235
00:14:22,210 --> 00:14:24,880
So if I remove this variable,
236
236
00:14:24,880 --> 00:14:27,090
then it will be able to use the perGroup
237
237
00:14:29,570 --> 00:14:31,510
and data is here outside.
238
238
00:14:31,510 --> 00:14:33,880
So indeed now we get 1,000
239
239
00:14:33,880 --> 00:14:36,230
but then as we put it back here
240
240
00:14:36,230 --> 00:14:40,490
then the callback function will close over this variable.
241
241
00:14:40,490 --> 00:14:41,750
So it will close over
242
242
00:14:41,750 --> 00:14:45,290
the entire variable environment in fact.
243
243
00:14:45,290 --> 00:14:50,290
And so therefore it will then use this year first, right.
244
244
00:14:50,570 --> 00:14:52,100
And it did.
245
245
00:14:52,100 --> 00:14:56,530
So in fact, a disclosure even has priority
246
246
00:14:56,530 --> 00:14:57,633
over the sculpt chain.
247
247
00:14:58,690 --> 00:15:00,370
Okay, and with this,
248
248
00:15:00,370 --> 00:15:04,180
we finished these two lectures about closures
249
249
00:15:04,180 --> 00:15:06,080
and they hope that after this one,
250
250
00:15:06,080 --> 00:15:10,320
you are now a little bit better able to identify closures
251
251
00:15:10,320 --> 00:15:14,520
as they happen in your code or even here in my code
252
252
00:15:14,520 --> 00:15:15,730
throughout the codes
253
253
00:15:15,730 --> 00:15:18,790
because we will see some closures happening
254
254
00:15:18,790 --> 00:15:21,130
some more times in the future.
255
255
00:15:21,130 --> 00:15:23,990
Now all there's left to do is the coding challenge
256
256
00:15:23,990 --> 00:15:26,320
in the next video where you will be thinking
257
257
00:15:26,320 --> 00:15:28,323
about closures one more time.
22692
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.