title: How does console.log work?
body: <h3>First Example:</h3>
  
  <p>In the following example: <a href="http://jsfiddle.net/maniator/ScTAW/4/" rel="noreferrer">http://jsfiddle.net/maniator/ScTAW/4/</a><br>
  I have this js:</p>
  
  <pre><code>var storage = (function () {
      var store = [];
      return {
          "add": function (item) {
              store.push(item);
          },
          "get": function () {
              return store;
          }
      };
  }());
  
  storage.add('hi there')
  console.log(storage, storage.get(), storage.add('hi there #2'));
  </code></pre>
  
  <p>And here is what gets printed to the console: </p>
  
  <blockquote>
    <p>Object
     ["hi there", "hi there #2"] undefined</p>
  </blockquote>
  
  <p>One would think that the console should only say:</p>
  
  <blockquote>
    <p>Object
     ["hi there"] undefined</p>
  </blockquote>
  
  <p>becase the second push did <strong>not</strong> happen until after the value was logged, therefore it should not be displayed.</p>
  
  <hr>
  
  <h3>Second Example:</h3>
  
  <p>In the following example: <a href="http://jsfiddle.net/maniator/ScTAW/5/" rel="noreferrer">http://jsfiddle.net/maniator/ScTAW/5/</a></p>
  
  <p>I am using the same <code>storage</code> variable but I log like so:</p>
  
  <pre><code>storage.add('hi there')
  console.log(storage, storage.get(), (function() {
      storage.add('hi there #2');
      console.log('TESTING');
  })());
  </code></pre>
  
  <p>What gets printed to the console is:</p>
  
  <blockquote>
    <p>TESTING<br>
    Object
     ["hi there", "hi there #2"] undefined</p>
  </blockquote>
  
  <p>hmmmm well that is odd now isnt it? One could expect to see:</p>
  
  <blockquote>
    <p>Object
     ["hi there"] undefined<br>
    TESTING</p>
  </blockquote>
  
  <p>Why is this happening? What is going on behind the scenes of the console logging mechanism?</p>