0

I am confusing with the use of closure and self-revoking in Javascript. When I run this code, each time I click the Button the counter increases by 1. It seems that the function assigned to "add" is self-invoking function. 

<!DOCTYPE html>
<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>

However, when I call the function like the code below, the counter value is always 1.

<!DOCTYPE html>
<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(){
    var temp = add();
    document.getElementById("demo").innerHTML = temp();
}
</script>

</body>
</html>

Could anyone tell me the difference between the two examples, and what goes under the hood? Thanks for you help.

Manh Quang
  • 91
  • 1
  • 9
  • in the second code whenever you are calling the method add(). counter is resetting to zero. because of var counter = 0; Hence always 1 – Strikers Jul 18 '17 at 12:44
  • You should read about closures. You will get the answer. It's all related to variable scopes. https://stackoverflow.com/questions/36636/what-is-a-closure – Kamesh Jul 18 '17 at 12:44
  • It seems that it's my mistake. The second one should be:

    0

     – Manh Quang Jul 18 '17 at 13:16

3 Answers3

1

A closure is a persistent local variable scope, It persists its value even after code execution is finished. And In your case that self-invoking function is a closure and hence it's always incrementing the previous value by 1. In the latter case, in the normal invoking of function, the variable is redeclared every time you call the function so it resets the value to 0. For more read about closures here: What is a 'Closure'?

Kamesh
  • 1,122
  • 9
  • 12
1

self invoking means that you runs the function immediately after declare it. the function above is self invoking , but still it return a function. the function that returned has reference to the counter even after the parent function finished - that's the closure.

Ilay Azulay
  • 36
  • 2
1

Whenever you execute a function a closure is created, the closures contains a reference to all the variables the were assigned at the time, when the function was created. So when you call add function 

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

it is a function returning another function, the closure of your returned function will have a reference to counter variable..

so Whenever you call myFunction() it will assign a new function to temp variable with its own counter variable. that variable will start in 0 always... because is new

function myFunction(){
    temp = add();
    document.getElementById("demo").innerHTML = temp();
}

On the other hand self invoking function, will run the function immediately so when you run

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

you will execute that function immediately assigning a function to variable add, the add variable will have a reference to a function that returns a counter..

Renzo Calla
  • 7,486
  • 2
  • 22
  • 37