2

I just watched one of Douglas Crockford's new videos where he says he's not using for loops anymore. Instead he uses .forEach and .map etc. to loop through arrays. But I don't understand why that would be better.

I know the for loop syntax is bit longer, but isn't it immediately clear what you're doing (even, I think, if you don't know the language). So why is this better?

The video can be found here: http://youtu.be/bo36MrBfTk4?t=21m30s

vnglst
  • 622
  • 5
  • 11
  • I don't think there is anything wrong with for-loops but there is a broader trend within the software industry as a whole towards functional programming. I for one find that really powerful, and have switched to functional patterns wherever possible. The good news is that Javascript provides many aspects of functional programming already, whereas languages like Java are having to be retrofitted now. – Simon H Dec 02 '14 at 11:51
  • In foreach you don't need to know length of array, also, you immediately have access to current array element. – Justinas Dec 02 '14 at 11:51
  • Does this answer your question? [Why should I use foreach instead of for (int i=0; i – Karl Knechtel Aug 11 '22 at 06:59

3 Answers3

1

Iteration functions are much clearer. Every method has its own use case. While for loop doesn't tell you its purpose, unless you go over the code.

Iteration functions give you a separated closure for every element in the array. In some cases it saves your life. For example, I think most beginners have written such code:

for(var i = 0; i < elements.length; i++) {
    elements[i].onclick = function() {
        alert(i);
    }
}

Which usually isn't as expected.

We have to wrap with a function closure:

for(var i = 0; i < elements.length; i++) {
    (function(i) {
        elements[i].onclick = function() {
            alert(i);
        }
    })(i);
}

On the other hand, sometimes for loop do perform better than iteration functions. Yes, it's node.js. If you are running a service that has extremely large amount of visitors, the difference in performance is significant, since iteration functions produce tons of function calls.

Leo
  • 13,428
  • 5
  • 43
  • 61
1

Neither approach is always better, it depends on the situation, and perhaps as much on what you feel comfortable with.

For one, when using map the code gets a bit clearer. You see the output as a result of an expression:

var added = arr.map(function(e){
  return e + 1;
});

When using a for loop it's not as obvious where the output ends up:

var added = [];
for (var i = 0; i < arr.length; i++) {
  added.push(arr[i] + 1);
}

This approach fits better for functional results (e.g. using map or filter to produce a new set), using forEach doesn't have that exact benefit.

A drawback of the functional approach is that the callback function gets its own context. If you are using it in a method, you need to bind the callback function to get the right context:

var added = arr.map(function(e){
  return e + this.change;
}.bind(this));

Anyway, often the situation is more complex than simple examples like this. Then whatever approach you choose won't have that much impact either on performance or readability.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
0

In essence you are correct, under the hood .map and .forEach likely use a for loop themselves. Really this comes down to preference.

In my opinion, the use of .map, .reduce, .forEach creates code with higher clarity. When I come to look at your code, a for does not tell me, immediately, what your intent is, I have to read the code to determine your intent in addition to what you are doing.

When I come across one of the functions listed above, I know precisely what your intent is. For example, if I come across .map, I know that you are applying an operation to each item in your set.

Honestly, I do not use any of these as I tend to favor underscorejs to handle list manipulation operations.

xximjasonxx
  • 1,192
  • 2
  • 11
  • 27