JavaScript Closures and Parentheses -

1.

<script type="text/javascript">    var incrementclickcounts = (function(){     var clickcounts = 0;     return function() {       return ++clickcounts;     }   })()()  </script> <input type="button" value="clickkkk" onclick="alert(incrementclickcounts);" /> 

2.

  <script type="text/javascript">    var incrementclickcounts = (function(){   var clickcounts = 0;   return function() {     return ++clickcounts; } })()  </script> <input type="button" value="clickkkk" onclick="alert(incrementclickcounts());" /> 

i'm working on closures, , came across example. second example works correctly incrementing clickcounts every time clicked, first example returns value of '1'.

i having trouble distinguishing on how use parentheses correctly invoke function.

in first case, incrementclickcounts contains number; in second case, function. let's break down execution :

first case :

var incrementclickcounts = (function(){     var clickcounts = 0;     return function() {       return ++clickcounts;     }   }) // declares function () // executes function - returns function initializes clickcounts 0 , increments 1 () // executes returned function --> outputs 1 , stores in incrementclickcounts variable.  // incrementclickcounts contains number = 1 

so :

alert(incrementclickcounts) 

will alert "1".

second case :

var incrementclickcounts = (function(){   var clickcounts = 0;   return function() {     return ++clickcounts; } }) // declares function () // executes function -     // returns function initializes clickcounts 0 , increments 1    // function stored in incrementclickcounts  // incrementclickcounts contains function cal call increment clickcounts 

so :

alert(incrementclickcounts()) 

will execute function , increment clickcounts.