1

I'm a JavaScript newbie. Recently I'm learning about JavaScript closures and I'm stuck at the following section:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Closures</h2>

<p>Counting with a local variable.</p>

<button type="button" onclick="myFunction()">Count!</button>

<p id="demo">0</p>

<script>
var add = (function () {
  var counter = 0;
  return function () {counter += 1; return counter;}
})();

function myFunction(){
  document.getElementById("demo").innerHTML = add();
}
</script>

</body>
</html>

I understand that the add() function is a self-invoking function and a closure at the same time so it will invoke itself once the webpage is load. The counter will initialize and return 1 immediately. And whenever i press the button (calling the add() function). It should be initialize again and return 1 again. But it turns out my logic is wrong, the counter keeps increasing by 1 when i press the button. I don't understand why as i thought var counter = 0; will be recognized every time and also isn't the variable inside the function should have local scope so after it has executed the counter variable will be destroyed?

Doraemon Mister
  • 11
  • 1
  • 1
    Does this answer your question? [How do JavaScript closures work?](https://stackoverflow.com/questions/111102/how-do-javascript-closures-work) – Kipras Melnikovas Jan 24 '21 at 23:21
  • I understand that closure is about one function calling another function and the insider function can have access to the outsider function's variable. But it confused me that why the above example can omit the var counter = 0; after the first invoked (self-invoked) and why counter is not destroyed after it has been executed. Is there anything i missed from your article? – Doraemon Mister Jan 24 '21 at 23:34
  • Well, the very definition of a javascript closure should give a hint: "A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.". Thus, the main property of a closure is that the outer scope variables, e.g. your `counter`, are not destroyed. See also https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures – Kipras Melnikovas Jan 24 '21 at 23:43
  • *"I understand that closure is about one function calling another function"* a function calling another function has nothing to do with closures. *"and the insider function can have access to the outsider function's variable."* here it's getting warmer. *"But it confused me ... why counter is not destroyed after it has been executed"* and exactly this is the essence of what a closure is and how they work. The preservation of a function scope **after** the function has returned. – Thomas Jan 25 '21 at 00:34
  • Ok. Can I say that a function's variable only will be destroyed if the function is the innermost? Otherwise the function's variable will be preserved for inner functions as long as the browser window is closed (like global variables). Am I correct? – Doraemon Mister Jan 25 '21 at 00:55

0 Answers0