It's time to describe one of the most confusing, but at the same time one of the most powerful and
important part of JavaScript I'm going to talk about closure's it is a weird and odd topic for many
developers, especially for beginners.
So you need to understand it.
Well, OK, what does Clojure mean?
We can summarize.
Closure's in the following words.
Function has always access to the variables of its outer function, even after the execution context
of the outer function is finished.
It is a little and simple definition about closure's maybe doesn't tell you everything about them and
it's not helpful at this point.
But during the lecture you will learn step by step what those words actually mean.
OK, in order to explain closure's.
That's right.
Some examples.
As the first example, I'm going to write a simple one.
Great function for adding some numbers right function and call it calculate.
Pass the parameter as number one, then insert a function, create a variable and call it number two
and assign a value as 10, as we already know, functions in JavaScript are first class functions.
And also because of that functions or special type of object, we can return them.
So I'm going to use written statement and return new function, right.
Return function and pass the parameter number three.
Inside that function, I'm going to create a variable sum and then write number one.
Number two.
Number three.
Also, log the variable, some in writes the consider some.
OK, so here we have a function which includes parameter number one and the variable number two, and
it returns new function with parameter number three and this function at those three numbers.
OK, let's invoke the calculate function and going to create a new variable add and then call the function
right var at equals to calculate and parse the argument as five, then log this variable and cancel.
Right.
Cancel that log at.
Reload, so we have in castle function, which is returned by the function calculate in order to get
the result, we need to invoke this function as well.
I hope you remember how to do that.
We just need to use the variable at the right at and pass the argument at 15 and also remove this console
that lock reload.
And we have 30 the some of those three numbers.
All right.
I'm sure that you were expecting this result.
Definitely.
And you may wonder what the special happened here.
OK, let me remind you what happens behind the scenes when the functions are executed, when the code
runs global execution context is created, when JavaScript engine reaches that line, calculate function
is invoked and it creates its local execution context.
And this function exists parameter number one, which is actually variable itself and also variable
number two.
So function named calculate runs and then finishes its execution.
Therefore, its local execution context is gone from the execution stack.
Then when the engine, which is next line, the second function is invoked and it creates its local
execution context as well.
This function includes parameter number three.
So as you remember in Castle, we got results thirty.
It means that those three numbers, I mean, No.
One, number two and number three were sent here was a question, a function named CALCULATE has already
finished its execution.
How could the return function have access on variables, number one?
And number two, it's possible in JavaScript because of the power of closure's.
So inner function always has access to the variables of output function even after it finishes running.
This is power of JavaScript.
It's not some kind of magic.
It's a built in feature of this programming language because we don't create manually closure's JavaScript
engine does it automatically.
OK, let's write one more a bit complicated example for better understanding.
Let's remove this code.
This example is one of the most common and popular regarding closure's.
So if you search information about closure's, you may find it somewhere.
OK, let's create function.
Right.
Function A.
Then I'm going to create an empty array right over a right equals to empty square brackets and then
below, right simple for loop.
Right, I equals to zero, then we need to hear a simple condition is less than three and then the increment
I plus plus.
On each iteration, we're going to use function, which will display an item in council.
So for that, we need to use a real push method, right, a red dot push and inside the parentheses
pass function and inside that function.
Right.
Cancel the log I.
And then return.
All right.
OK, now we need to invoke dysfunction, let's create variable B and then call function A right of our
B equals to A at first I'm going to display in council what an array looks like.
I don't want you to be confused because this is a moment where many of the students get lost.
So that's in council, right?
Constant dialogue B.
Reload and you see that we have an array which consists of three functions because we had three iterations.
Now let's invoke each of them.
So write B and then in square brackets, the index number zero.
Now we have access on the first function, which is a first item in Iraq.
And in order to call it, we need to place parentheses here in the same way.
Let's call the rest of the functions, write B1 and then B2.
All right, before I reload the page, I want you to think about what should be the result.
Do you think that we will get zero one, two or something else?
Let's see, reload and we have three for each item.
That is something strange, right?
Not really.
Let's take a deep look how this code work behind the scenes.
So here we have our code.
When it runs global execution, context is created, then function is invoked and it creates its local
execution context and the block of code inside it is executed.
It will have an empty array and for loop or the first iteration when I is equal to zero because of the
push method, an empty array, anonymous function is added as the first item.
Then I becomes one and again anonymous function is added to the array as a second item.
Then in the same way I becomes to condition is still true and function is added to the array as the
third item.
Keep in mind that these functions are just added to the array without any execution.
After that it becomes three.
But according to the condition, I should be less than three.
Therefore, condition becomes false and a loop terminates iteration.
Also function a finish is execution and its local execution context is gone from the stack.
After that, we need more functions inside that array.
They are called they create their local execution context because of the closure.
They have access on variable, which is in their output function.
So for the first, second and third function, variable is same and it equals two three.
Makes sense, I hope.
Yes.
All right, actually, disclosures we can see in council, if we drop down this array and then expand
the function, we will find you skulks.
Then if we drop down it as well, we will see here Clojure.
And if we check it, we'll find the variable.
I would the value three.
It's the same for the rest of the functions.
If we check them, we will find again I with the value three.
OK, if we want to get results in council as zero one and two for that we need to execute this anonymous
function during each iteration.
Can you think of what we can do for that?
The perfect way is to use our newly learned, immediately invoked function expression.
So we need to change your code a little bit at first.
Let's wrap anonymous function with parentheses and then invoke it.
We do not need this code anymore.
Also, remove this variable as well, then reload the page and here we go.
We have zero one and two.
Before we finish, let's consider once again what happened.
So when the code runs again, global execution context is created, then the function is invoked and
it creates its local execution context.
On the first iteration, when the AI is equal to zero function inside push method is executed because
this function now is iffy.
At this point I is zero as I see, and in council we get zero.
Then the execution context of if he is gone on the second iteration, AI becomes one and again function
inside push method is executed and we get in council one, then execution context of if he is gone and
starts third iteration on which I becomes to again function is executed and in the exact same way we
get to in council, then the execution context of if he is gone I becomes three condition inside for
a loop is false and loop terminates iteration makes sense.
All right, I hope that you understood what closures are in JavaScript.
I know that it's not a simple topic and it often causes confusion and misunderstanding.
I want you to try your best in order to understand it.
Well, because, as we said, it's very powerful and important feature in JavaScript.
If you had any trouble with understanding this concept, I recommend to re watch this video.
All right.
Let's go ahead.