JavaScript variable value in closure

Question

I have found a javascript example and I need an explanation:

<html>
<body>
    <button type="button" onclick="myFunction()">Count!</button>
    <p id="demo">0</p>

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

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

I don't understand why the value of var counter get increased every time I press the button while in other place of this tutorial I read: "The lifetime of a JavaScript variable starts when it is declared. Local variables are deleted when the function is completed."

Every time the button is clicked,`add` is executed, which executes `counter += 1` is executed. This adds `1` to the current value of `counter`. — Felix Kling, Nov 04 '16 at 05:59
*"counter is a local variable and as such is deleted after function execution"* Not if it is closed over. *"it should be 0 every time the function starts"* You are right, but the function that contains `var counter = 0;` is only executed *once on page load*. — Felix Kling, Nov 04 '16 at 06:05
It might be easier to see if you didn't use an IIFE but rather: `function makeAdd() { var counter = 0; return function () {return counter += 1;}; } ; var add = makeAdd();`. `add` is assigned the return value of `makeAdd`, which is a function. — Felix Kling, Nov 04 '16 at 06:08
@FelixKling Thank you for detailed explanation, I think it is the best answer. — Zet, Nov 04 '16 at 06:20
Adding to the discussion here you should note that `counter` doesn't get deleted everytime you call `add()`. The `add()` function is simply: function () { return counter += 1; } The scope in which `counter` is defined is already in use by this anonymous `function()` and it won't be collected as garbage (or deleted). — Divyanshu Maithani, Nov 04 '16 at 06:28

score 0 · Accepted Answer · answered Nov 04 '16 at 06:03

0

Javascripts variable scope is function scope.

This case it is a closure.

 var add = (function () {
  var counter = 0;
  return function () {
        return counter += 1;}
  }) ();
  function myFunction(){
             document.getElementById("demo").innerHTML = add();
  }

When button is clicked,you are calling myFunction ,which is internally calling add method .

add method is an IIFE here, which has function inside. This situation is closure. Inner functions can access outer functions variable but not vice versa. So when add method is called,variable 'counter' status can be tracked.

Hope this helps

answered Nov 04 '16 at 06:03

Geeky

7,420
2
24
50

*"add method is an IIFE here"* No, `add` if the function that is returned from the IIFE. – Felix Kling Nov 04 '16 at 06:04
but when everytime we calls add function dont counter initialize with zero again ? – Mahi Nov 04 '16 at 06:06
1

@Mahi: The `add` function is `function () { return counter += 1;}`. It doesn't initialize `counter` with `0`. – Felix Kling Nov 04 '16 at 06:07
@FelixKling oh now i understand . first time add function executing using iife after that we are using only return function. – Mahi Nov 04 '16 at 06:13

JavaScript variable value in closure

1 Answers1