title: javascript, about closure function call
body: <p>I am quite new to javascript and i have encounter problems about function call and the closure.</p>
  
  <p>Below are the code that i tried in w3schools,</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;body&gt;
  
      &lt;p&gt;Counting with a local variable.&lt;/p&gt;
  
      &lt;button type="button" id="btn"&gt;Count!&lt;/button&gt;
  
      &lt;p id="demo"&gt;0&lt;/p&gt;
  
      &lt;script&gt;
      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);
      &lt;/script&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It works fine for the current code, that every time i press the button, the number in the paragraph(id="demo") increment by 123.</p>
  
  <p>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.</p>
  
  <p>In this situation, i have a few questions to ask.</p>
  
  <p>1.For the code :</p>
  
  <blockquote>
    <p>var add = (function (test) {...}) <strong>()</strong>;</p>
  </blockquote>
  
  <p>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)?</p>
  
  <p>2.Why these two ways to define the function result in different result?</p>
  
  <p>Thanks a lot, any help is appreciated.</p>
  
  <p><strong>EDIT</strong></p>
  
  <hr>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;p&gt;Counting with a local variable.&lt;/p&gt;
  
  &lt;button type="button" id="btn"&gt;Count!&lt;/button&gt;
  
  &lt;p id="demo"&gt;0&lt;/p&gt;
  
  &lt;script&gt;
  /*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);
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>