forEach is almost the same as for or for..of , only slower. There's not much performance difference between the two loops, and you can use whatever better fit's the algorithm. Unlike in AssemblyScript, micro-optimizations of the for loop don't make sense for arrays in JavaScript.
Deductions. This foreach loop is faster because the local variable that stores the value of the element in the array is faster to access than an element in the array. The forloop is faster than the foreach loop if the array must only be accessed once per iteration.
Foreach performance is approximately 6 times slower than FOR / FOREACH performance. The FOR loop without length caching works 3 times slower on lists, comparing to arrays. The FOR loop with length caching works 2 times slower on lists, comparing to arrays.
ForEach is 96% slower than for loop.
I don't trust results from jsperf measuring performance of for loop vs forEach. At least for chrome and firefox on my machine results are completely different than the ones being advertised in jsperf.
http://jsperf.com/foreach-vs-loop (mine)
http://jsben.ch/#/BQhED (more popular)
On my laptop running Ubuntu 11.10 I have the following results in Firefox:
for: total=1641 ms, avg=164.1 ms
forEach: total=339 ms, avg=33.9 ms
uname -a:
Linux 3.0.0-16-generic #29-Ubuntu SMP Tue Feb 14 12:48:51 UTC 2012 x86_64 x86_64 x86_64 GNU/Linux
Unfortunately, Chrome doesn't return the result of console.timeEnd() but the running times are same and just faster in Chrome. I'm observing that forEach almost 10x faster than for loop in Chrome, and 3x faster in Firefox.
In Chrome I'm getting approximately these running times:
for: avg=80 ms
forEach: avg=6 ms
Here's the code I ran in Firefox and Chrome console.
var arr = [];
for(var i = 0; i < 100000; i++) arr[i]=i;
var numberOfRuns = 10;
function time(name, f){
console.time(name);
f();
return console.timeEnd(name);
}
function runTest(name, f){
var totalTime = 0;
for(var r = 0; r < numberOfRuns; r++)
totalTime += time(name,f);
return totalTime;
}
var forTime = runTest('for', function(){
for(var j = 0; j < arr.length; j++)
arr[j];
});
var forEachTime = runTest('forEach', function(){
arr.forEach(function(v){v;});
});
console.log('for', {total:forTime, avg:forTime / numberOfRuns});
console.log('forEach', {total:forEachTime, avg:forEachTime / numberOfRuns});
Running the tests for one million items has the same performance difference. Could you please advise if I'm missing something and I should trust jsperf results instead of the real ones I'm observing? Of course I do trust the real results that I can see right here right now in my browser.
EDIT: The test scenario isn't objective as discovered during discussion with @Blender. Looks like js optimizer optimezes forEach loop with no action in it and thus obscures running time if there were some real code.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With