title: Chrome DevTools Command Line API, jQuery, dollar sign variable
body: <p><em>Sorry for the title because I don't know how to define the exact problem as of writing...</em></p>
  
  <p>The problem I am seeing just now is that, under some certain conditions, the dollar sign variable (<code>$</code>) from DevTools Console is not overridden after jQuery is loaded.</p>
  
  <p><strong>Environment</strong>:</p>
  
  <ul>
  <li>Open the DevTools Console on a page where <code>jQuery</code> is <em><strong>NOT</strong></em> loaded.</li>
  <li>Run the test cases in DevTools Console. </li>
  <li>Reload the page after each test case such that <code>jQuery</code> is unloaded.</li>
  <li>Chrome version: 37.0.2062.120 m</li>
  </ul>
  
  <p><strong>Preparation code</strong>:</p>
  
  <pre><code>function loadJqueryThenFire(func) {
      if (!window.jQuery) {  
          var s = document.createElement('script');
          s.type = 'text/javascript';
          s.src = '//code.jquery.com/jquery-1.11.1.js';
          s.onload = function() {
              func();
              this.parentNode.removeChild(this);
          };
          document.getElementsByTagName('head')[0].appendChild(s);
      } else {
          func();
      }
  }
  </code></pre>
  
  <p><strong>Test case 1</strong><sub><em>(anonymous function expression)</em></sub>:</p>
  
  <pre><code>test = function() { console.log($); };
  // this returns Console's "$" object
  loadJqueryThenFire(test);
  </code></pre>
  
  <p><strong>Test case 2</strong><sub><em>(named function expression)</em></sub>:</p>
  
  <pre><code>test = function test() { console.log($); };
  // this returns Console's "$" object
  loadJqueryThenFire(test);
  </code></pre>
  
  <p><strong>Test case 3</strong><sub><em>(anonymous function expression passed as parameter)</em></sub>:</p>
  
  <pre><code>// this returns Console's "$" object
  loadJqueryThenFire(function() { console.log($); }); 
  </code></pre>
  
  <p><strong>Test case 4</strong><sub><em>(named function expression passed as parameter)</em></sub>:</p>
  
  <pre><code>// this returns Console's "$" object
  loadJqueryThenFire(function test() { console.log($); }); 
  </code></pre>
  
  <p><strong>Test case 5</strong><sub><em>(function declaration)</em></sub>:</p>
  
  <pre><code>function test() { console.log($); };
  // this returns jQuery's "$" object (which is what I am expecting)
  loadJqueryThenFire(test); 
  </code></pre>
  
  <p>This behaviour also happens on the latest jQuery stable version (<code>2.1.1</code>).</p>
  
  <p>My question is: could anyone explain why the <code>$</code> is not overridden? Would that be something related to how <code>jQuery</code> declare her <code>$</code>?</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>Found some more peculiar behaviours...</p>
  
  <p><strong>Test case 6</strong><sub><em>(immediately-invoked function expression)</em></sub>:</p>
  
  <pre><code>(function() {
      function test() { console.log($); };
      // this returns Console's "$" object
      loadJqueryThenFire(test);
  })()
  </code></pre>
  
  <p><strong>Test case 7</strong><sub><em>(nested function declaration)</em></sub>:</p>
  
  <pre><code>function tc7() {
      function test() { console.log($); };
      // this returns jQuery's "$" object (which is what I am expecting)
      loadJqueryThenFire(test); 
  }
  tc7();
  </code></pre>