5 ms·

Rethinking JavaScript for-loops

38 points by vladocar 16y ago

wccrawford 16y ago
I like some of those. Thanks!
DanielRibeiro 16y ago
There are betterse ways already: underscore.js(http://documentcloud.github.com/underscore/ http://documentcloud.github.com/underscore/) and coffescript(http://jashkenas.github.com/coffee-script/ http://jashkenas.github.com/coffee-script/, which also has its own underscore.coffee http://jashkenas.github.com/coffee-script/documentation/docs/underscore.html http://jashkenas.github.com/coffee-script/documentation/docs...). All three started by Jeremy Ashkenas (http://www.documentcloud.org/about http://www.documentcloud.org/about).
- angusC 16y ago
  Hi Daniel - I wrote the article. You reference some excellent high order functions, we now also get pretty much the same functions for free in every browser except IE8. We get them with jQuery and Prototype.js too. But the point of the article was: now that for-loops are gaining obsolescence as conventional array iterators, what can we use them for (and how do we have fun with them). A bit like a "what to do with those old LPs" discussion - except I still love listening to LPs :-)
Swizec 16y ago
The main point of the article seems to be that the JavaScript for construct is exactly the same as the C for construct. You get the same power, the same freedom and the same responsibility to for the love of god use something better. Especially in JavaScript. Please stop using for loops in favour of asynchronous recursion (or similar). Thank you. This is what I've been using lately, pretty neat: http://github.com/caolan/async http://github.com/caolan/async
- angusC 16y ago
  Hi Swizec - maybe the article could have been clearer - the real point was this: now that our standard iteration pattern has made obsolete by higher order functions (forEach, filter, map etc. - which are available natively as well as github :-)) lets see if we can re-purpose it for fun and learning. It wasn't supposed to be taken too seriously. BTW for-loops are not exactly the same in C, because JavaScript has no block scope.
  - gcb 16y ago
    i believe his point (or i liked to read it such as) was more towards the responsibility of not messing up other programmers head, just because the language gives you the power to do so. should the next programmer (usually =you+T) see the loop and think "oh, a loop" or "oh, a loop. and it uses the assignment of the each var to the conditional block... great, now i will have to go through the data we receive to make sure no element get's a value of zero"
  - Swizec 16y ago
    I know I know, I've done some pretty horrible things with for loops myself. :) Just fell like it's important to state that one shouldn't use "fun and learning" techniques in a production environment.
jsankey 16y ago
A neat collection of tricks, but I'm not sure I would ever actually employ any of them (except perhaps storing the length -- although I'd like to check that it makes a difference first). There just doesn't seem to be a major advantage to any of the tricks, and they all come with some cognitive cost to the reader (and in some cases greater costs, e.g. failure on arrays with falsey values).
- grayrest 16y ago
  > except perhaps storing the length -- although I'd like to check that it makes a difference first) It makes a difference in the IEs. I don't remember it making much of a difference one way or the other with the JITted engines, though if the ES harmony proxies become widespread, there's a reasonable chance it'll become best practice again.
- zbanks 16y ago
  Another trick is to do the loop backwards: for(var i = arr.length - 1; i >= 0; i--){...} I remember seeing a test that noted a visible difference between the two. Its arguable, however, if it makes a significant difference in the grand scheme of things...
stewars 16y ago
Re-thought for-loops hurt the brain. Please don't do that. "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." – Brian W. Kernighan
shaunfs 16y ago
What is a for-loop? Seems to copy my beautiful jQuery each()! $.each(new Array(3), function(i){ alert(i); });
chewbranca 16y ago
While I enjoy the creativity of his for loops, javascript is the not language to be doing this in. One of the key advantages of using a foreach loop with a callback function, is that javascript has functional scope. All of those variable declarations in his for loops are just for show, so personally I think the while loops in his examples are more appropriate for javascript as it doesn't fool you into thinking it has block scope.
mahmud 16y ago
It would have been interesting if these new recommended iteration forms were accompanied by profiling data and performance tests across the major engines. Right now it looks like variety for the sake of variety.
edanm 16y ago
The feeling here seems to be that "for-loop tricks" are not a good idea, mainly because of readability. I disagree. I'm talking about the "idea" of for-loop tricks, not the specific ones shown in the article. For-loops are used in really limited ways, but they should be used much more often. Programmer should be better versed in how for loops work, the fact that you can add multiple expressions between each semi-color (;), etc. The reason is, for-loops are the most readable constructs for looping. Here's why: For-loops are the one loop construct which give you all the information about the looping at once. Used smartly, you can read the first line of the for-loop, and discover everything that the programmer would like to do, that has to do with the looping. For example, adding two variables to be incremented in a for-loop is trivial: for (int i=0, int b=10; i==10; i++,b++) This can also be done outside of the for-loop declaration, e.g. as the first line inside the for-loop. However, for smart programmers, this signals, to me, that "b" is another variable having to do with the loop that I would like incremented each time. In other words, it gives me more info. Other good uses can include checking two conditions, checking conditions with side-effects (e.g. instead of i++, use word=read_word_from_file()), etc. Lots of people are uncomfortable with these in a for-loop, but I maintain that's the best construct for these kinds of things, since it gives you all the info you need to understand the loop at one point only.
monos 16y ago
I sometimes find this nicer to read when I just want to collect a property from an array of objects (yes, map would work too): var ids = [story.id for (story in stories)]

38 points by vladocar 16y ago

I like some of those. Thanks!

There are betterse ways already: underscore.js(http://documentcloud.github.com/underscore/ http://documentcloud.github.com/underscore/) and coffescript(http://jashkenas.github.com/coffee-script/ http://jashkenas.github.com/coffee-script/, which also has its own underscore.coffee http://jashkenas.github.com/coffee-script/documentation/docs/underscore.html http://jashkenas.github.com/coffee-script/documentation/docs...). All three started by Jeremy Ashkenas (http://www.documentcloud.org/about http://www.documentcloud.org/about).

angusC 16y ago
Hi Daniel - I wrote the article. You reference some excellent high order functions, we now also get pretty much the same functions for free in every browser except IE8. We get them with jQuery and Prototype.js too. But the point of the article was: now that for-loops are gaining obsolescence as conventional array iterators, what can we use them for (and how do we have fun with them). A bit like a "what to do with those old LPs" discussion - except I still love listening to LPs :-)

Swizec 16y ago

The main point of the article seems to be that the JavaScript for construct is exactly the same as the C for construct. You get the same power, the same freedom and the same responsibility to for the love of god use something better. Especially in JavaScript. Please stop using for loops in favour of asynchronous recursion (or similar). Thank you. This is what I've been using lately, pretty neat: http://github.com/caolan/async http://github.com/caolan/async

angusC 16y ago
Hi Swizec - maybe the article could have been clearer - the real point was this: now that our standard iteration pattern has made obsolete by higher order functions (forEach, filter, map etc. - which are available natively as well as github :-)) lets see if we can re-purpose it for fun and learning. It wasn't supposed to be taken too seriously. BTW for-loops are not exactly the same in C, because JavaScript has no block scope.
- gcb 16y ago
  i believe his point (or i liked to read it such as) was more towards the responsibility of not messing up other programmers head, just because the language gives you the power to do so. should the next programmer (usually =you+T) see the loop and think "oh, a loop" or "oh, a loop. and it uses the assignment of the each var to the conditional block... great, now i will have to go through the data we receive to make sure no element get's a value of zero"
- Swizec 16y ago
  I know I know, I've done some pretty horrible things with for loops myself. :) Just fell like it's important to state that one shouldn't use "fun and learning" techniques in a production environment.

jsankey 16y ago

A neat collection of tricks, but I'm not sure I would ever actually employ any of them (except perhaps storing the length -- although I'd like to check that it makes a difference first). There just doesn't seem to be a major advantage to any of the tricks, and they all come with some cognitive cost to the reader (and in some cases greater costs, e.g. failure on arrays with falsey values).

grayrest 16y ago
> except perhaps storing the length -- although I'd like to check that it makes a difference first) It makes a difference in the IEs. I don't remember it making much of a difference one way or the other with the JITted engines, though if the ES harmony proxies become widespread, there's a reasonable chance it'll become best practice again.
zbanks 16y ago
Another trick is to do the loop backwards: for(var i = arr.length - 1; i >= 0; i--){...} I remember seeing a test that noted a visible difference between the two. Its arguable, however, if it makes a significant difference in the grand scheme of things...

stewars 16y ago

Re-thought for-loops hurt the brain. Please don't do that. "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." – Brian W. Kernighan

shaunfs 16y ago

What is a for-loop? Seems to copy my beautiful jQuery each()! $.each(new Array(3), function(i){ alert(i); });

chewbranca 16y ago

While I enjoy the creativity of his for loops, javascript is the not language to be doing this in. One of the key advantages of using a foreach loop with a callback function, is that javascript has functional scope. All of those variable declarations in his for loops are just for show, so personally I think the while loops in his examples are more appropriate for javascript as it doesn't fool you into thinking it has block scope.

mahmud 16y ago

It would have been interesting if these new recommended iteration forms were accompanied by profiling data and performance tests across the major engines. Right now it looks like variety for the sake of variety.

edanm 16y ago

The feeling here seems to be that "for-loop tricks" are not a good idea, mainly because of readability. I disagree. I'm talking about the "idea" of for-loop tricks, not the specific ones shown in the article. For-loops are used in really limited ways, but they should be used much more often. Programmer should be better versed in how for loops work, the fact that you can add multiple expressions between each semi-color (;), etc. The reason is, for-loops are the most readable constructs for looping. Here's why: For-loops are the one loop construct which give you all the information about the looping at once. Used smartly, you can read the first line of the for-loop, and discover everything that the programmer would like to do, that has to do with the looping. For example, adding two variables to be incremented in a for-loop is trivial: for (int i=0, int b=10; i==10; i++,b++) This can also be done outside of the for-loop declaration, e.g. as the first line inside the for-loop. However, for smart programmers, this signals, to me, that "b" is another variable having to do with the loop that I would like incremented each time. In other words, it gives me more info. Other good uses can include checking two conditions, checking conditions with side-effects (e.g. instead of i++, use word=read_word_from_file()), etc. Lots of people are uncomfortable with these in a for-loop, but I maintain that's the best construct for these kinds of things, since it gives you all the info you need to understand the loop at one point only.

monos 16y ago

I sometimes find this nicer to read when I just want to collect a property from an array of objects (yes, map would work too): var ids = [story.id for (story in stories)]