Original subtitles

Let's now create two more situations

in which closures are gonna appear.

So that you can start identifying closures

in your own code in the future.

And both of these examples are gonna demonstrate

that we don't need to return if function

from another function in order to create a closure.

All right, so let's start with our first example here.

I'm gonna start by defining an empty variable called f

and then a function expression g.

So these are just some generic names

because what the functions do here don't really matter.

Then in here, I defined this a variable

and then I'm going to reassign the F variable

that we created out here.

And I'm gonna assign it a function value.

And this function will then simply log

the a variable to the console

let's say times two.

Okay, and that's it for now at least.

So let's try to call g

so that's gonna be dispersed function.

And so the result of this function is that a will be 23

and that F variable that we have out here

will become this function.

And so after g we can then call F.

So let's try that.

And we get 46 which is indeed 23 times two, all right.

And so what this proves is that this F value here

so this F function really does close over any variables

of the execution context in which it was defined.

And that is true even when the variable itself.

So F here was technically not even defined inside

of this variable environment here, right.

So this F variable was defined outside here

in the global scope, it was created here

but then as we assigned it a function here

in this the g function,

so right here at instill closed

over the variable environment of the g function.

And that includes this a variable.

And therefore it is able to access this a variable here

even after the g function here at this point

has of course already finished its execution, right.

So that's just what we learned in the last lecture.

So at this point of the execution,

the variable environment of g is no longer there, right.

But f, so this function here closed over

that variable environment and therefore it is able

to access the a variable.

So basically using the analogy of or less video,

the a variable is inside the backpack of the f function.

But now let's take it to the next level

and create a new function here.

So that's h and it's gonna be very similar.

All it's gonna do is to define b as some other value,

let's say this and then we will again,

reassign f, right here.

So let's call this one a b now of course.

So this one here will then try to access b

and multiply by two.

Okay, and so what I want to see with this

is what happens when we assign the f value

a second function.

Okay, so here we call g and so g will then assign to

or empty variable this f function.

Okay, and then if we call h afterwards

or actually let's do it after calling f for the first time.

So as we then call h then the f variable

will be assigned again.

So then a second function which is this one here.

And so what I want to see is what f does then.

So let's see.

And again, keeping in mind that F at this point

is a different function than this one here

because it was reassigned by h.

We just write that here.

Okay, and now we get 1554 which is probably 777 times two

and indeed it is.

And so this proves that the f function

it was reassigned here

also closed over the variable environment of h.

And so that's how it can access then the b variable here

which has set to 777.

So let's actually inspect the variable environment like

we did by the end of the last video.

So of f and then we will be able to see that in the closure,

it does indeed have the value of b

and it now no longer has the value of a.

So after the closure that it used to have before.

So at this point here at the closure contained

the value a and we can of course also see that.

So at this point in time, the closure is indeed a 23, right.

And so then as we reassign the function to a new value,

then that old closure basically disappears

and now the closure is b.

So this variable here of the birthplace

where it was reassigned.

And this is really fascinating in my opinion

that the closure can change like this

as the variable is reassigned.

So it really is true that a closure always makes sure

that a function does not lose the connection

to the variables that were present at its birthplace.

So it's always gonna remember them.

In our case here, the function

was kind of born inside of g first

and then it was essentially reborn again in h.

And so first the closure contained the a variable

of its first birthplace.

And then as it was reborn to follow our analogy

then it remembered this B variable off its birthplace.

Okay, so this was example one.

Let's now create another example.

Okay, so I hope the first one was clear here.

So whenever something like this happens

where your reassigned functions even without returning them,

keep in mind that also this will create a closure

but now moving on to our second example here

and that's gonna be a timer.

So a timer is another great example

that we don't need to return a function

to see a closure in action.

So here I'm going back to the example of the airline.

So creating a function called board passengers

and then we get the number of passengers and a wait time.

Then let's create a new variable in here

which I'm calling perGroup.

And that's because boarding usually happens in groups

and we usually have three groups.

So I'm gonna divide all the passengers.

So the number of passengers that is boarding by three

and by the end of this function,

I want to lock to the console.

We'll start boarding and then wait seconds, okay.

And now let's actually use a timer

and we haven't actually used a timer yet in this course.

And we will learn more about them later

but this is such a good use case

that I wanted to use a timer now.

And it's actually very simple.

So we just use the set time out function

and a set time out function needs two parameters.

The first one is a function which will be executed, okay.

And this function will be executed after a certain time.

For example, we can specify a 1,000 milliseconds

because the second argument here is milliseconds.

And so that will mean that whatever code

is inside of this function will be executed

after one second.

Let me actually do that out here

just so you see this as an example.

So if I saved us now wait one second

and then here you see timer appearing.

So I'm gonna do that again.

Okay, so you'll see that after this one second,

this function was executed.

Okay, and so this, as we already learned before

is essentially a callback function.

And in this case it is literally called later.

So in this case, after one second.

So let's create or callback function here.

And first I want to log to the console.

We are now boarding all and then the n passengers.

And so this n here is this parameter of the function.

So of this parent function which essentially is the function

or the scope in which this callback function here

is being created.

And so that will of course be important

for our closure example.

And then let's also use the perGroup variable now.

There are three groups each with

passengers, okay,

that's our function and now let's call it.

And here we want to specify wait and then times 1,000

because we're gonna pass into wait in seconds.

And this argument here needs to be in milliseconds

and so we just multiply by 1,000.

So board passengers, let's say we have 180 passengers

and it takes two, let's say three seconds.

So immediately when we call this function,

this variable will be created

then set time out will be called

and it will basically register this callback function here.

And then that will be called after three seconds.

But immediately also this console.log here

will be called, all right.

So this console.log here will not wait these three seconds

for these set time out callback to finish.

Okay, so immediately this variable is created,

this set timeout function is run and console.log is run.

And then after three seconds, this function here

will be executed.

And so let's see what happens to the n variable

and to the perGroup variable that is in this function.

So immediately we got this log and then after three seconds,

we are boarding all 180 and there are three groups

with 60 passengers each.

Okay, it worked.

And again, keep in mind that this callback function here

was executed completely independently

from the board passengers function.

All right, but still the callback function

was able to use all the variables that were

in the variable environment in which it was created.

So that's n and perGroup.

And one more time, this is a clear sign

of a closure being created, right.

So the only way in which this callback function here

can have access to the variables that are defined

in the board passengers function

that has long finished execution is if it created a closure.

And so that's exactly what happened.

And yeah, that's how we got access to perGroup

and also this argument of the function

so this wait here, right.

So as I mentioned in the last lecture,

the closure of course also includes the arguments

and that's because they are really just

a local variables in the function.

And to finish, let's now also prove

that the closure does in fact have priority

over the sculpt chain.

So here in the global scope,

I'm also gonna create a variable called perGroup equals

and then just some value here.

And so if the scope chain had priority over the closure,

then this callback function here

would indeed use this variable here

this global variable

because we can imagine this function here

basically being executed in the global scope, okay.

So if it wasn't for the closure it would use this.

So let me actually demonstrate that to you.

So if I remove this variable,

then it will be able to use the perGroup

and data is here outside.

So indeed now we get 1,000

but then as we put it back here

then the callback function will close over this variable.

So it will close over

the entire variable environment in fact.

And so therefore it will then use this year first, right.

And it did.

So in fact, a disclosure even has priority

over the sculpt chain.

Okay, and with this,

we finished these two lectures about closures

and they hope that after this one,

you are now a little bit better able to identify closures

as they happen in your code or even here in my code

throughout the codes

because we will see some closures happening

some more times in the future.

Now all there's left to do is the coding challenge

in the next video where you will be thinking

about closures one more time.