StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Solution #1</p> <pre><code>for (var i = 0; i < 4; i++) (function (i) { // scope #1 setTimeOut(function () { // scope #2 })(i), i*200); })(i); </code></pre> <p>is actually quite nice as it reduces indentation and therefore perceived code complexity. On the other hand the <code>for</code> loop does not have its own block which is something jsLint (rightfully, in my opinion) would complain about.</p> <p>Solution #2</p> <pre><code>for (var i = 0; i < 4; i++) { setTimeout((function (i) { // scope #1 return function () { // scope #2 } })(i), i*200); }; </code></pre> <p>Is the way I would do it most of the time. The for loop has an actual block, which I find increases readability and falls more into place with what you'd expect from a conventional loop (as in <em>"for x do y"</em>, opposed to the <em>"for x create anonymous function and execute it right away"</em> from #1). But that's in the eye of the beholder, really, the more experience you have, the more these approaches start to look the same for you.</p> <p>Solution #3</p> <pre><code>function makeHandler(index) { // scope #1 return function() { // scope #2 }; }; for (var i = 0 ; i < 4 ; i++) { setTimeout(makeHandler(i), i*200); }; </code></pre> <p>as you say makes things clearer in the <code>for</code> loop itself. The human mind can adapt easier to named blocks that do something predefined than to a bunch of nested anonymous functions.</p> <pre><code>function prepareTimeout(index) { // scope #1 setTimeout(function () { // scope #2 }, index * 200); }; for (var k = 0; k < 4 ; k++) { prepareTimeout(k); }; </code></pre> <p>is the absolute same thing. I don't see any "issue sidestepping" here, it's just equivalent to #3. </p> <p>As I see it, the approaches do not differ in the least bit, <em>semantically</em> - only <em>syntactically</em>. Sometimes there are reasons to prefer one over the other (the "function factory" approach is very re-usable, for example), but that doesn't apply to the standard situation you describe.</p> <p>In any case, there are three concepts that a new user of JavaScript must get his head around:</p> <ol> <li>functions are objects and can be passed around like integers (and <em>therefore</em> they don't need a name)</li> <li>function scope and preservation of scope (how closures work)</li> <li>how asynchronicity works</li> </ol> <p>Once these concepts have sunken in, there will be a point at which you no longer see such a big difference in those approaches. They are just different ways to "put it". Until then you simply choose the one you are most comfortable with.</p> <hr> <p>EDIT: You could argue that that point is when you transition from a <em>"you must do it like this"</em> attitude to a <em>"you could do it like this, or like this, or like this"</em> attitude. This applies to programming languages, cooking and pretty much anything else. </p> <p>To say something about the implicit question in the title: Readability is also in the eye of the beholder. Ask any Perl programmer. Or someone comfortable with regular expressions.</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