for vs forEach

JavaScript performance comparison

Revision 5 of this test case created by Adrian Sutton

Info

Is it faster to use the native forEach or just loop with for?

Preparation code

<script>
  var i, values = [],
      sum = 0;
  for (i = 0; i < 10000; i++) {
   values[i] = i;
  }
  
  function add(val) {
   sum += val;
  }
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
forEach
 
values.forEach(add);
 pending…
for loop, simple
 
for (i = 0; i < values.length; i++) {
 add(values[i]);
}
 pending…
for loop, cached length
 
var len = values.length;
for (i = 0; i < len; i++) {
 add(values[i]);
}
 pending…
for loop, reverse
 
for (i = values.length - 1; i >= 0; i--) {
 add(values[i]);
}
 pending…
for loop, cached length, no callback
 
var len = values.length;
for (i = 0; i < len; i++) {
 sum += values[i];
}
 pending…
for loop, cached length, using function.call and supplying index and original array
 
var len = values.length;
for (i = 0; i < len; i++) {
 add.call(values, values[i], i, values);
}
 pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

5 comments

Helder Magalhães commented : ∞

  1. Using "++i" and "--i" should be more optimized (than "i++" and "i--") in terms of an interpreted language. Currently I'm not being able to find a pointer to further support this, but I'll be glad to craw for it again if it sounds interesting.

  2. I got an exception while running in IE8, after the "Run tests again" finishes: Line: 81 Error: 'document' is null or not an object

I also got a similar exception when using IE9 platform preview 4: Line: 81 Error: 'undefined' is null or not an object

These are probably browser-specific issues which might not interfere with the test results but deserve some sort of investigation! :-)

Tobi commented : ∞

I just tested and i++/i-- is faster than ++i/--i.

Boredom commented : ∞

i++ should always be slower in programming; but compiler optimization can allow it to be as fast (but never faster) as ++i... only poorly created javascript engines does that.

i++ says to do either one of two things: A) temp = i; ++i; return temp; B) i++ {code1} {code2} --> {code1} ++i {code2}

So in the case of B, somevar[i++] = i; gets optimized to somevar[i] = ++i;

Now why is there a speed difference sometimes? The same reason that i+=1 does not always yield a slower result than ++i or i++. CHEATING.

Effectively, while i++ can be optimized to ++i; you have compiler optimizations that target only specific code segments (target the words, not the function).

Now these optimizations are often added in to target "javascript test suits." Rather than actually improve performance, you improve your score. Major differences as there are a plethora of cheats you can do to optimize iterations over loops; but actually optimizing "Real World Code" is something else.

Boredom commented : ∞

Still... forEach should be much faster. After all, you are removing all the property calls and can directly increment along the memory allocated for the array!

Jez commented : ∞

I just can't work out why creating a custom forEach can be SO much faster (in chrome at least) -> http://jsperf.com/foreachvscustomforeach I would have thought the browser would have optimized most forEach loops to basically be for() loops anyway?

Add a comment