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> |
Output:
