Closures in JavaScript  and their uses.

Closures in JavaScript and their uses.

If we talk about the basic explanation of closures then-- According to the Youtube series ( Namaste JavaScript by Akshay Saini ).

Function bundled with its lexical environment is known as a closure. Whenever function is returned, even if its vanished in execution context but still it remembers the reference it was pointing to. Its not just that function alone it returns but the entire closure and that's where it becomes interesting !!

So This is all about Closures but In the further section we go deep into it and see behind the scene and how things work around it.

Lets Start with basic example-

raycast-untitled (1).png

Do you Know JavaScript has something called Lexical Scope .

So when you execute this., The "Inner" function try to run and search the value of "a" inside the "local memory store" and when it does not find its goes to its Lexical Parent and get the value of log "a".

this is what closure is.

If you try to remember the first things we discuss i.e Function bundled with its lexical environment is known as a closure.

The main point of closure is that even if it's vanished in execution context but it still remembers the reference it was pointing to.

Now we will take one more example to understand main points of closures.

raycast-untitled (3).png

We've discussed that the inner function has access to it's outer scope and it can see the variable (name) declared inside the outer function. We also knew that JavaScript is a synchronous, blocking, single-threaded language. So after running throw all the line when it's come to "sumupFunc" executed line of programs will vanished, but here comes the closure in game. When we invoke the inner function later in the program or after 100 line of code It still remembers the reference it was pointing to.
When you execute sumupFunc Its not just that function alone it returns but the entire closure .

What is uses of closure.

Now ,the question is where we use such features in our codebase

There is many use case of closures , but here we take example of one of most important use case.

Data hiding and encapsulation in JavaScript.

Suppose we have variable and we want to hide that variable so no other function or part of program can have access to it .

Here we take the basic scenario of counter program to understand more about it and the role of closure in data hiding

raycast-untitled (11).png

We have defined the counter variable and the function countIt to increase its value by one. It will work fine ,but the problem is counter set in global scope , so any part of the program can access and manipulate it .

Here comes the data hiding in the picture ,so no other function can change or manipulate it , to achieve this we use Closures.

raycast-untitled (10).png Now Counter can't be access from outside , so it's like we have privacy over the counter and we can only achieve by function.

Now Lets see how can we achieve this counter .

raycast-untitled (9).png Here we return the function countIt and when we will return this function it returns closures as well as function also. Now when we call closeCounter into the finalCount function it gives access to function countIt.

CountIt function has a closure with counter variable now when we call finalCount , it will increase the value of counter by one.

So that's how can we achieve this variable in a good way.

Conclusion

In this articles we've learned that Closure is an inner function and have access to it's outer function If the outer function is called it's create closure. Closure's existence is dependent on their lexical parent function's existence, even if it's vanished in execution context but it still remembers the reference it was pointing to.

There are many advantage and use case of closure other than in data hiding. You can use it in scenarios like module design pattern, currying ,memoize , maintaining state in async world , setTimeOut, iterators and many more