title: Collision Avoidance By Hiding Variables Inside a Function Scope
body: <p>Im unable to wrap my head around this code snippet which explains how collision takes place between variables .</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function foo() {
    function bar(a) {
      i = 3;
      
      console.log(a+i);
    }
    
    for(var i=0; i&lt;10; i++) {
      bar(i+2);
    }
    
  }
  
  foo();</code></pre>
  </div>
  </div>
  </p>
  <p>This code tends to create an infinite loop due to collision of variables. Declaring &quot; var i = 3&quot; solves the problem but how do i utilize the scope to &quot;hide&quot; the inner declaration of the variable i ? And mainly why does the infinite loop problem arrive in the first place?</p>
  <p>However, when I remove the assignment of &quot;i = 3&quot;, would that be considered as a solution to the problem?
  <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>function foo() {
    function bar(a) {
      console.log(a+i); 
    }
    
    for(var i=0; i&lt;10; i++) {
      bar(i+2);
    }
   
  }
  
  foo();</code></pre>
  </div>
  </div>
  </p>