title: How does the following get executed in Javascript, step by step?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var a;
  console.log(a);
  
  +function() {
    alert("Hello from IIFE!");
  }();
  
  console.log(a);
  a = 'Hi';</code></pre>
  </div>
  </div>
  </p>
  
  <p>Answer in console:
  undefined
  ALERT POPUP
  Hi</p>
  
  <p>Question: Either both a should be giving undefined or both should display Hi</p>
  
  <p>How does the javascript work?</p>
  
  <p>Executing in different ways</p>