title: Explanation of Javascript nested loop script
body: <p>I am having trouble understanding this nested loop and how it works.</p>
  <pre class="lang-js prettyprint-override"><code>function foo() { 
      function bar(a) { 
          i = 2; // change value of in in enclosing scope
          console.log(a + i);
      } 
      for (var i=0; i&lt;10; i++) { 
          bar(i); // infinite loop
      } 
  }
  foo();
  </code></pre>
  <p>Can someone explain why is bar called with 3? I thought first time bar is called it would be zero from inital value of i in the enclosing for loop?</p>
  <p>I know this is an infinite loop where a + i always prints 5
  I know that the  value of parameter a passed to bar is always 3
  I know that the value of i in function bar is always 2</p>
  <p>Can someone walk me through one repeitition of this infinite loop, explaining the order in which things occur.</p>