Original subtitles

To make sure 100% that you understand closures now,

lets work on this coding challenge number 2.

And actually this one is more of a thinking challenge

than a coding challenge.

So what I want you to do is to take this IIFE here

and at the end of the function,

simply attach an event listener

that changes the color of the selected h1 element.

So this header here to blue, all right.

And that should happen each time

that the body element is clicked.

So whenever we click here.

And what's important here is

that you do not select the h1 element again.

So just use this header that you have here.

All right.

So that's all the code you have to write

which is really simple.

But the real challenge here is that I want you to

explain to yourself,

or even to someone around you why this works.

So as you click the body, the text will change to blue.

And so it's gonna work

but you have to understand

and you have to explain why it worked.

And so this is a good exercise,

because being able to explain something

to someone else means that you have understood it yourself.

So I really hope that you do this one

even though it doesn't involve a lot of coding.

But it's still really important to do this.

So take all the time that you need and think about

when exactly the callback function is executed.

And of course, what that means for the variables

that are involved in this example.

So again take the time that you need

and I see you here in a minute

with my own explanation basically.

So the code that you had to write was simply this.

So selecting the body element

and then add event listener on click,

and then this callback function.

And then I'm simply changing the style here

to blue.

Then keep in mind that we did not select the h1 here again.

I simply used the header variable

that we had already selected before.

So let's give it a safe.

And I will click now the body.

And indeed, it became blue, and that worked just fine.

So why did this work?

Or in other words, how does this callback function here,

get access to the header variable?

And one more time, the explanation is the closure.

So I hoped that you really explained basically

how the closure works to yourself or to someone else.

And so in this particular example, the closure is necessary

or it's useful

because by the time this callback here is executed,

this IIFE,

so this immediately invoked function expression is

now long gone.

So it has already been executed.

And with it, this variable here is basically gone as well.

Right?

So all of that is gone.

But still, this function here is attached

to the body element.

And so it's waiting for some events to happen there.

And when the event happens, well,

then this function here is of course, executed.

And again, even though the environment

in which this function here was created is already gone,

it is still able to access the variables

that were created in that variable

by the time the function was born, so to say.

So this is the birthplace of or event handler function here.

And therefore the function

remembers all the variables present at a time of its birth.

We can also say

that the header is in the backpack of this function.

So that explanation works as well.

And you can go even further and deep into theory

and basically try to explain

how all of this works behind the scenes.

But that I already explained to you

in the more theory lecture,

and so I'm not gonna go into that again.

All right.

So hopefully, you managed to explain this to yourself,

maybe to your dog, whatever.

But what's important is that you now understand

how the closure works

and how and when it appears.

So this was yet another great example

of a closure appearing.

Anyway with this we've finished

this pretty important section on functions.

And so in the next one,

we will finally build another visual project

with a graphical user interface

which is really exciting.

So that section is all about arrays,

and we're gonna build together an awesome application there.

So I hope to see you there as soon as possible.