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.