title: JavaScript Function inside the loop
body: <p>Can someone explain to me why JSLint complains about "Function inside the loop" with this example:</p>
  
  <pre><code>  for (var i = 0; i &lt; buttons.length; i++) {
      (function(i) {
        buttons[i].onclick = function(e) {
          t.progressBars[t.current].update(buttons[i].getAttribute("data-value"));
        }
      })(i);
    }
  </code></pre>
  
  <p>But dosen't when I change it to:  </p>
  
  <pre><code>function makeHandler(i)
    {
      return function() {
          t.progressBars[t.current].update(buttons[i].getAttribute("data-value"));
        }
    }
  
    for (var i = 0; i &lt; buttons.length; i++) {
  
        buttons[i].onclick = makeHandler(i);
  
    }
  </code></pre>
  
  <p>I don't quite understand as it seems that with each loop iteration new function object has to be returned, even though it happens inside of <code>makeHandler()</code> function. Why the second example is ok with JS linters?</p>