javascript, about closure function call

Question

I am quite new to javascript and i have encounter problems about function call and the closure.

Below are the code that i tried in w3schools,

<!DOCTYPE html>
    <html>
    <body>

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

    <button type="button" id="btn">Count!</button>

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

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

    /*function add(test){
       var counter = 0;
       return function (test) {return counter += test;}
    }*/

    function myFunction(){
    document.getElementById("demo").innerHTML = add(123);
       //document.getElementById("demo").innerHTML = add().call(this, 123);
    }

    var btn = document.getElementById("btn");
    btn.addEventListener("click", myFunction);
    </script>

    </body>
    </html>

It works fine for the current code, that every time i press the button, the number in the paragraph(id="demo") increment by 123.

But when i tried the commented code, which create a function with closure with exact same code, the paragraph value remain at 123 every onclick.

In this situation, i have a few questions to ask.

1.For the code :

var add = (function (test) {...}) ();

What is the usage of the last bracket? If we provide parameter to the last bracket, how can we use it in the declaration of the anonymous function of variable (var add)?

2.Why these two ways to define the function result in different result?

Thanks a lot, any help is appreciated.

EDIT

<!DOCTYPE html>
<html>
<body>

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

<button type="button" id="btn">Count!</button>

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

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

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

function myFunction(){
 //document.getElementById("demo").innerHTML = add(123);
    document.getElementById("demo").innerHTML = add().call(this, 123);
}

var btn = document.getElementById("btn");
btn.addEventListener("click", myFunction);
</script>

</body>
</html>

It seems that the code run with no error occur, when i use the commented code for declaration of function, but just a bug that the integer of the paragraph didn't increment.

The term for the technique is ["_immediately invoked function expression_"](http://benalman.com/news/2010/11/immediately-invoked-function-expression/). Also called an _IIFE_. — evolutionxbox, May 22 '17 at 09:33
Aren't you getting an error when you uncomment the commented line? Add() will return a value and you can't call `.call` on that. — Pankaj Shukla, May 22 '17 at 09:36
http://stackoverflow.com/questions/2421911/what-is-the-purpose-of-wrapping-whole-javascript-files-in-anonymous-functions-li — Suraj Rao, May 22 '17 at 09:41
Also http://stackoverflow.com/questions/592396/what-is-the-purpose-of-a-self-executing-function-in-javascript — Suraj Rao, May 22 '17 at 09:42
Thanks for answers guys, now i have understanding about what the usage of last bracket. — ProgrammingBaKa, May 22 '17 at 09:59
However i still not understand why i can't achieve the same effect for my edit's code to increment the integer. Again, any help is appreciated :) — ProgrammingBaKa, May 22 '17 at 10:01

score 1 · Accepted Answer · answered May 22 '17 at 10:02

The reason you are getting 123 all the time is because every time you click on the button, you take a new inner function with a closure on counter variable with value 0; So value of counter always remains 0 and when you add 123 to 0 you get 123. If you move closure part out of the event handler, you would get exact same result as in the first case.

Notice the line var inner = add(); //<---Notice this line. This would take the closure one time and subsequently you will keep increasing the value of counter.

Also, notice this line inside myFunction:

document.getElementById("demo").innerHTML = inner.call(this, 123);

Here we are calling the inner function that we had reference on earlier.

/*var add = (function (test) {
      var counter = 0;
      return function (test) {return counter += test;}
  })();*/

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

var inner = add(); //<---Notice this line
function myFunction() {
  //document.getElementById("demo").innerHTML = add(123);
  document.getElementById("demo").innerHTML = inner.call(this, 123);
}

var btn = document.getElementById("btn");
btn.addEventListener("click", myFunction);

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

<button type="button" id="btn">Count!</button>

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

score 0 · Answer 2 · answered May 22 '17 at 09:35

0

() is to invoke the anonymous function you just declare, and it return another anonymous function. If you provide a parameter, it will be fed to your function (test). In this case, you don't actually need the first test parameter. It's just not used.
For your commented code, it returns a function. And the function is never invoked.

answered May 22 '17 at 09:35

Chiu

350
4
14

May i ask in this case, in what way i can invoke the function? – ProgrammingBaKa May 22 '17 at 09:41

score 0 · Answer 3 · answered May 22 '17 at 09:49

() The last bracket is to execute it.

The example u have shown is that of an IIFE. IIFE are used to limit scope of all ur variable so that namespaces can be demarkcated.

//without params
(function(){
       //...
})()

//-OR- (both are same)

(function(){
       //...
}())

//with params. if u ever wondered how that $ variable was being used in jquery, this is how.
(function(jquery){
})(jquery);

//es6
(
() => { ... }
)()

closure is a programming concept in which (otherwise) scoped-out variables are allowed to persist. DO NOT use closure with big object collections !!!

var outer = function(p1){
    var inner = function (p2) {
        return (p1 + p2);
    return inner;
}; //outer ends.    

var x = outer(10);
x(20); //20 + 10;
x(30); //30 + 10;
x(40); //40 + 10;

javascript, about closure function call

3 Answers3