DEV Community

Muhammad Asif
Muhammad Asif

Posted on

JavaScript closure in 2 minutes..

Intro

Closure is one of the most important tricky concepts of JavaScript.
Many people's heads hang when they hear the name of Closure, but in this post I will prove that your fears were unfounded.
A common question on the interview board is Closure ??
So it is very important for us to know this.

The smart concept of JavaScript is Closure, Smart means there is something in it which is not in others. Closure really does something that others cannot do.
Before talking about Closure, I would like to ask you to know Scope, Lexical Scope, Context, Variable Life Cycle a little better.

Let's Start --

We know that the JavaScript engine normally executes all code in the default global context except for a single function call.
Because the function itself creates a context which is called functional context.

The life cycle of the variables that are used in a function lasts until the function is executed. As soon as the function is executed, the variables die.

Example:

function counter(){
var count = 0
return count +=1
}
counter() // 1
counter() // 1
counter() // 1
Enter fullscreen mode Exit fullscreen mode

Here 3 times counter function was called & 3 times result came 1,1,1.
This means that if you call a function, its internal variable cannot store the previous data.

If we want this to come 1,2,3 then it is not going to be done through a function.
But it is possible to do this by creating closures,
Because he (Closure) remembers a lot like a lover who gets deception.

We know that all the parameters of OuterFunc get Variable InnerFunc Access through lexical scope and even if it returns the function.
Take a closer look at the code below:

function counter(){
var count=0
return function(){
return count += 1
}
}
var counter1 = counter() ;
counter1() // 1
counter1() // 2
counter1() // 3
Enter fullscreen mode Exit fullscreen mode

Same !! How did this happen !?
Let me tell you what happened here

  • A function is declared named counter, a variable named count is taken and it is returned by adding 1 to InnerFunc.

  • Since the function in JavaScript is a fastclass function, the function can be returned in the form of value.

  • Here, since Counter1 is placed in the variable, we get the result only by calling Counter1 as a function.

  • Well understood !! But the second time I called the function, the count increased by 1 - how did it happen ???

Um, of course, yes, I know this, why it's something known in advance.
This means that even after a function is executed, it is the job of the Closure Viber to keep the internal variables and parameters alive.

I hope if you can understand this much better then you will get 6-7 effortlessly at 10.
If you want to get 10 out of 10, you can read the book Scope & Closures By Kyle Simpson.
And I, the student, will be 100% wrong, so I hope you will do a little constructive criticism without swearing.

Wrapping Up

I hope you enjoyed the article, if yes then don't forget to press ❤️ and Subscribe. You can also bookmark it for later use. It was fun to create this article and If you have any queries or suggestions don't hesitate to drop them. See you.
You can extend your support by giving me stars on GitHub Profile.😊👇
G i t h u b
P o r t f o l i o
L i n k e d i n

Support

Buy me a Coffee

Top comments (0)