Learn How TO Utilize Closures In JavaScript

Closures are a very powerful mechanism in the JavaScript
programming language. In this, we will learn about closures and the benefits of using them in your JavaScript code.

What is Closure?

A closure is a function along with its lexical environment bundled together. That means the function has access to its outer
function scope even after the outer function has returned.

A closure can remember and access variables and arguments of its
outer function even after the function has finished.

Let's see what is a Lexical Scope?

A lexical scope or static scope in JavaScript refers to the accessibility of the variables, functions, and objects based on their physical location in the source code.

For example:

   function display() {
        var name = 'punya'; 
        function displayName() { 
            console.log(name); 
        }
        displayName();
    }
    display();

Output:

display() creates a local variable called name and a function called displayName(). The displayName() function is an inner function that is defined inside display() and is available only within the body of the display() function.

Note that the displayName() function has no local variables of its own. However, since inner functions have access to the variables of outer functions, displayName() can access the variable name declared in the parent function, display().

Let’s look at some practical examples of closures :

Example 1:

function Counter() {
            var counter = 0;

            function IncreaseCounter() {
                return counter += 1;
            };

            return IncreaseCounter;
        }

        var counter = Counter();
        console.log("Value of Counter is:",counter()); 
        console.log("Value of Counter is:",counter());
        console.log("Value of Counter is:",counter()); 
        console.log("Value of Counter is:",counter());

Output:

In the above example, outer function Counter returns the reference of inner function IncreaseCounter(). IncreaseCounter increases the outer variable counter to one. So calling inner function multiple time will increase the counter to one each time. So the behaviour of closure is that the inner function is returned from the outer function before being
executed.

####Example 2:

   function Counter() {

        var counter = 0;

        setTimeout(function () {
            var innerCounter = 0;
            counter += 1;
            console.log("counter value is = " + counter);

            setTimeout(function () {
                counter += 1;
                innerCounter += 1;
                console.log("counter value is = " + counter + ", innerCounter value is = " + innerCounter)
            }, 500);

        }, 1000);
    };

    Counter();

Output:

As per the closure definition, when counter() called it will first execute the 1st setTimeout() after 500ms and 2nd
setTimeout() is called after 1000ms.

Advantages of using closures:

It can useful for Data Encapsulation which means it is useful in
hiding implementation detail in JavaScript.

Example :

var counter = (function () {
        var privateCounter = 0;
        function changeBy(val) {
            privateCounter += val;
        }
        return {
            increment: function () {
                changeBy(1);
            },
            decrement: function () {
                changeBy(-1);
            },
            value: function () {
                return privateCounter;
            }
        };
    })();

    console.log("Counter value is: ",counter.value()); 
    counter.increment();
    counter.increment();
    console.log("Counter value is: ",counter.value()); 
    counter.decrement();
    console.log("Counter value is: ",counter.value()); 

Output:

Disadvantages of closures:

1: Till the time its active, the memory can’t be garbage collected.

2: It slows down the performance, because function within other
function creates duplicate in memory.