Closures in JavaScript

Closure in JavaScript are most confusing term, but actually it is most powerful concept of JavaScript. Closure occurs in JavaScript because of functional level scoping. Function inside function can use members of outer function (parent function).

I would like to write 2 most important

1. The context of an inner function includes the scope of the outer function.
2. An inner function enjoy that context even after the parent functions have returned.

Let’s discuss one problem scenario, suppose we have one button on the page and now we need how many times button is clicked, we need the count. One simple way of implementation is: use one global variable and increment that variable on button click. This is easy but Global variables are not good to use, because same variable name might be present in the application. It is never recommended to use global variable in JavaScript. One good solution to this is to use functional level scoping of JavaScript and create Closure. Closure in JavaScript are caused due to function level scoping.

Below is one example of closure which is used to get one incremented number every time.

    var getCount = (function () {
        var counter = 0; // parent function variable which is accessible in child function
        return function () {
            return ++counter;
        };
    })(); // self executing function 

The output of this function when called will be as shown below: