Databases
StackOverflow2013
Postsdbo
POJavaScript closures vs. anonymous functions
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavaScript closures vs. anonymous functions
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload