title: JS - assigning function to variable
body: <p>As we all know, this following <strong>will not run the a() function</strong> so the <strong>alert box will not appear</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// 1st
  function a() {
    alert('A!');
    return function() {
      alert('B!');
    };
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>and we know that the following code <strong>will run the a() function</strong> and <strong>alert box 'A!' will appear</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// 2nd
  function a() {
    alert('A!');
    return function() {
      alert('B!');
    };
  };
  a(); // calling function</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>However</strong>, if we run following code, the <strong>a() function will be called</strong> and <strong>alert box 'A!' will also appear</strong>, just like the second code above</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// 3rd
  function a() {
    alert('A!');
    return function() {
      alert('B!');
    };
  };
  var x = a(); // assigning function to new variable</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>QUESTION:</strong>
  why does this happen (on 3rd snippet)? we didn't call the a() function yet (my current understanding). Didn't we just assigning x to a() function?.</p>