Overview of the JavaScript Closures

   Today I am gonna give you all an introduction to JavaScript closures, an important concept that every programmer should be familiar with. According to MDN,

 "Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure 'remembers' the environment in which it was created." 

It uses lexical scoping, meaning that the function will be executed with the scope in which it was defined rather than the scope in which it was invoked.

   To make the concept clear let’s take an example. Assume we need to keep track of the number of times a button is clicked on a certain web page. So the below piece of code will do it.

   If you run the above code, it’s perfectly fine and gives the number of clicks on the button as we expected. But the problem with this approach is, here the variable ‘count’ is a global variable. So any script on the page can access and change the value of it. To avoid that we can make ‘count’ a local variable by initializing it inside our function.

   The modified code will avoid the variable from getting modified unnecessarily but with the modification we’ll not be able to track the click count as the variable ‘count’ is initialized inside the function.So whenever the function is called, it resets the value of count to zero and then increments it by one. Therefore no matter how many times you click, the click count will never go beyond one.

A closure would be the perfect solution for this kind of a problem.  

   Whenever we click on the button, the outer function is called and it will return the inner function. Here it is important to know that the outer function will get executed only once. The inner function can access the variable ‘count’, and will increment it by one whenever the button is clicked.Therefore by using a closure we can avoid the variable 'count' being accessed unnecessarily while recording the number of clicks on the button. That's it!!!
   This is just an simple example of how and where we can use closures.If you are keen on learning more about JavaScript closures, you can dive in with the tutorials available on the internet.