title: EcmaScript 5 Google TechTalk - Scoping accident 1 example
body: <p>I'm watching this lecture: <a href="http://www.youtube.com/watch?v=Kq4FpMe6cRs" rel="nofollow noreferrer">http://www.youtube.com/watch?v=Kq4FpMe6cRs</a></p>
  
  <p><img src="https://i.stack.imgur.com/Ca1Aj.png"></p>
  
  <pre><code>// the speaker states that "'bar' is just some function 
  // that invokes whatever function is passed to it"
  function bar(fn) {
      fn();
  }
  
  function foo() {
      var x = 8;
      bar(function baz() { return x; });
  }
  
  Object.prototype.x = 'foo';
  </code></pre>
  
  <p>At minute 35, the above shown issue is presented. The lecturer states that some browsers will return <code>foo</code> instead of <code>8</code>. </p>
  
  <p>Why?</p>
  
  <p>Btw, while writing this question, I figured it out, but I'll post this question anyway because it's an interesting issue. <code>:)</code></p>
  
  <hr>
  
  <p><strong>Live demo:</strong> <a href="http://jsfiddle.net/simevidas/mHyKc/" rel="nofollow noreferrer">http://jsfiddle.net/simevidas/mHyKc/</a></p>
  
  <p>Opera 11 alerts <code>'foo'</code>, all my other browsers (including IE9) return <code>8</code>.</p>
  
  <hr>
  
  <p><strong>Update:</strong> I take back what I said about having figured this out. It has something to do with the nested function being a named function. If you remove the name (<code>baz</code>), then Opera returns <code>8</code>, which means that the issue only occurs with named nested functions.</p>
  
  <p>But why?</p>