title: What is the most idiomatic way to handle variables declared in multiple for loops?
body: <p>JavaScript only has function scope. Thus, variables declared in for loops are visible for the entire function.</p>
  
  <p>For example,</p>
  
  <pre><code>function foo() {
      for(var i = 0; i &lt; n; i++) {
          // Do something
      }
      // i is still in scope here
  }
  </code></pre>
  
  <p>When we have multiple for-loops, this opens the question of how we handle the variables in these other for loops.</p>
  
  <p>Do we use a different variable?</p>
  
  <pre><code>for(var i = 0; i &lt; n; i++) { }
  for(var j = 0; j &lt; n; j++) { }
  </code></pre>
  
  <p>Or do we use the same variable but just assign a value (instead of declaring it)?</p>
  
  <pre><code>for(var i = 0; i &lt; n; i++) { }
  for(i = 0; i &lt; n; i++) { }
  </code></pre>
  
  <p>Or declare <code>i</code> outside of the loops?</p>
  
  <pre><code>var i;
  for(i = 0; i &lt; n; i++) { }
  for(i = 0; i &lt; n; i++) { }
  </code></pre>
  
  <p>Or redeclare <code>i</code>?</p>
  
  <pre><code>for(var i = 0; i &lt; n; i++) { }
  for(var i = 0; i &lt; n; i++) { }
  </code></pre>
  
  <p>All of these work (or at least they do on the latest versions of my browsers). <a href="http://www.jshint.com/" rel="noreferrer">JSHint</a> doesn't like the last approach, though.</p>
  
  <p>Is there an approach which is most idiomatic or otherwise preferable?</p>