for vs array-foreach

JavaScript performance comparison

Test case created by John-David Dalton

Preparation code

 
<script>
  Benchmark.prototype.setup = function() {
    var array = Array(31).join('x').split('');
    
    function callback(value, index, object) {
      return value;
    }
  };
</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
for-loop
 
for (var index = 0, length = array.length; index < length; index++) {
  callback(array[index], index, array);
}
 pending…
Array#forEach
 
array.forEach(callback);
 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:

1 comment

John-David Dalton (revision owner) commented : ∞

The point of this test is to show that by creating your own custom forEach-lite implementation you can get better performance over native.

Many times you don't need to support all of the functionality/edge cases of the native method and that allows you to gain performance/custom-functionality and save code because you no longer need to have an ES5 compliant fallback.

Many libs, like Underscore.js, fork for native methods but could reduce code/gain speed if they settled for simpler methods.

Most devs don't care about supporting sparse arrays or ToUint32'ing a length value and this allows us to optimize for the common case.

Also, by implementing a custom method you can gain functionality like exiting early by explicitly returning false or method chaining. See for-vs-array-foreach/4.

Add a comment