title: why is JavaScript Closure returning undefined
body: <p>I know something very basic I am missing . But can't find what's wrong with it ?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;p&gt;A function can access variables defined inside the function:&lt;/p&gt;
  
  &lt;button type="button" onclick="alert(makeMyCounter.increment)"&gt;Click Me!&lt;/button&gt;
  
  &lt;p id="demo"&gt;&lt;/p&gt;
  
  &lt;script&gt;
      var makeMyCounter = function () {
          var privateCounter = 0; 
  
  
          return {
              increment : function() {
                  privateCounter += 1;
              },
              decrement : function() {
                  privateCounter += -1;
              }
          }
      }();
  
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Why is privateCounter returning undefined ? But when debugged via browser , it is being assigned 1 though .</p>