How closure works in JavaScript ? Last Updated : 25 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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: Comment More infoAdvertise with us Next Article How closure works in JavaScript ? F faizamu19 Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How JavaScript Works? JavaScript is a dynamically typed, cross-platform threaded scripting and programming language, used to put functionality and interactivity at the client side as well as to write logic on the server side of a website. It can display content updates, interactive maps, control multimedia, interactive f 13 min read How getElementByID works in JavaScript ? The document method getElementById() returns an element object representing the element whose id property matches with the given value. This method is used to manipulate an element on our document & is widely used in web designing to change the value of any particular element or get a particular 2 min read How to Execute JavaScript Code ? Javascript is a high-level, Just In Time compiled programming language which converts the entire machine code at once and then executes it immediately. Javascript code is executed by the Javascript Engine, which is separate software. Different browsers have their own implementation of JS Engine embe 2 min read How does memory stacks work in Javascript ? Introduction: The memory stack is a mechanism in JavaScript that allows us to allocate and free memory. If a programmer wants to store some data, they must first create an empty part of the heap that is called a "stack." Then, they can push and then pop values on the stack. When working with strings 3 min read How to write a function in JavaScript ? JavaScript functions serve as reusable blocks of code that can be called from anywhere within your application. They eliminate the need to repeat the same code, promoting code reusability and modularity. By breaking down a large program into smaller, manageable functions, programmers can enhance cod 4 min read Like