How closure works in JavaScript ?

Last Updated : 25 Jul, 2024

In this article, we will discuss about the closures working JavaScript. Let us first understand what exactly closures are and basic details which are associated with closures in JavaScript.

A Closure is a combination of a function enclosed with references to its surrounding state (the lexical environment). In JavaScript, closures are created every time a function is created at run time. In other words, closure is just a fancy name for a function that remembers the external things used inside it.

Let us look at some examples to understand how closures work in JavaScript.

Example 1:

In this example, we will declare a closure that would eventually access an outer variable balance from the outer function.
After using the outer variable in an inner most function, that closure will help us deduct 100 from it, whenever that outer function is called.

HTML

<!DOCTYPE html>
<html>

<body>
    <h2>JavaScript Closures</h2>
    <button type="button" onclick="initaccount()">
          Click Me!
        </button>
    <p id="demo"></p>
    <script>
    function initaccount() {
        var balance = 1000;

        function currentbalance() {
            balance = balance - 100;
            alert(balance);
        }
        currentbalance();
    }
    </script>
</body>

</html>

Output:

Explanation: In the above example, currentbalance() can access outer variable balance hence balance is deducted by 100 each time initaccount() method is called.

Example 2: Closures can be nested as well as in below example. Here in the example both outerfunction() and innerfunction() has access to counter variable , hence on calling Counter() both outerfunction() and innerfunction() increments the value of counter. In this context, we can say that closures have access to all outer function scopes.

HTML

<!DOCTYPE html>
<html>

<body>
    <h2>JavaScript Closures</h2>
    <button type="button" onclick=" Counter()">
        Click Me!
    </button>
    <p id="demo1"></p>
    <p id="demo2"></p>
    <script>
    function Counter() {
        var counter = 0;

        function outerfunction() {
            counter += 1;
            document.getElementById("demo1").innerHTML
                = "outercounter = " + counter +
                "from outerfunction " ;

            function innerfunction() {
                counter += 1;
                document.getElementById("demo2").innerHTML
                 = " innercounter = " + counter + 
                   "from innerfunction ";
            };
            innerfunction();
        };
        outerfunction();
    };
    </script>
</body>

</html>

Output:

How getElementByID works in JavaScript ?

faizamu19

Improve

Article Tags :

How closure works in JavaScript ?

Similar Reads

Thank You!

What kind of Experience do you want to share?