title: JavaScript closures vs. anonymous functions
body: <p>A friend of mine and I are currently discussing what is a closure in JS and what isn't. We just want to make sure we really understand it correctly.</p>
  
  <p>Let's take this example. We have a counting loop and want to print the counter variable on the console delayed. Therefore we use <code>setTimeout</code> and <strong>closures</strong> to capture the value of the counter variable to make sure that it will not print N times the value N.</p>
  
  <p>The wrong solution without <strong>closures</strong> or anything near to <strong>closures</strong> would be:</p>
  
  <pre><code>for(var i = 0; i &lt; 10; i++) {
      setTimeout(function() {
          console.log(i);
      }, 1000);
  }
  </code></pre>
  
  <p>which will of course print 10 times the value of <code>i</code> after the loop, namely 10.</p>
  
  <p><strong>So his attempt was:</strong></p>
  
  <pre><code>for(var i = 0; i &lt; 10; i++) {
      (function(){
          var i2 = i;
          setTimeout(function(){
              console.log(i2);
          }, 1000)
      })();
  }
  </code></pre>
  
  <p>printing 0 to 9 as expected.</p>
  
  <p>I told him that he isn't using a <strong>closure</strong> to capture <code>i</code>, but he insists that he is. I proved that he doesn't use <strong>closures</strong> by putting the for loop body within another <code>setTimeout</code> (passing his anonymous function to <code>setTimeout</code>), printing 10 times 10 again. The same applies if I store his function in a <code>var</code> and execute it <em>after</em> the loop, also printing 10 times 10. So my argument is that <strong>he doesn't really <em>capture</em> the value of <code>i</code></strong>, making his version <em>not</em> a closure.</p>
  
  <p><strong>My attempt was:</strong></p>
  
  <pre><code>for(var i = 0; i &lt; 10; i++) {
      setTimeout((function(i2){
          return function() {
              console.log(i2);
          }
      })(i), 1000);
  }
  </code></pre>
  
  <p>So I capture <code>i</code> (named <code>i2</code> within the closure), but now I <em>return</em> another function and pass this around. <strong>In my case, the function passed to setTimeout really captures <code>i</code>.</strong></p>
  
  <p><strong>Now who is using closures and who isn't?</strong></p>
  
  <p>Note that both solutions print 0 to 9 on the console delayed, so they solve the original problem, but we want to understand which of those two solutions <strong>uses closures</strong> to accomplish this.</p>