How closure works in JavaScript ?

0 0 1 minute read

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, a 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 actually work in JavaScript.

Example 1:

In this example, we will be declaring a closure which would eventually access an outer variable balance from the outer function.
After using the outer variable in inner most function, that particular closure will help us to deduct 100 from it, each time 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> 