Comparing methods for looping through an array in JavaScript (v20)

Revision 20 of this benchmark created by molokoloco on

Description

Comparing methods for looping through an array of 10000 items and do a minimal operation with the new value each time.

Test rendered values here :

Disclamer

In this new test, array is not regenerated for each benchmarks because of destructive methods (cf. https://twitter.com/molokoloco/status/443013019548020736) You can compare .pop() / .shift() between themselves, acknowledging they also copy the array for each test...

Working on this i have just found a lot of bugs (at the end ^^)...

This big broken test, for the use of only one array and some destructive methods... (all the tests after shift() or pop() run with an empty array)

Ressources

Thanks you peoples of JS ;)

Preparation HTML

<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>

Setup

// Fake callback function (with minimal action on the value)
    var tmp = 0;
    var process = function(value) {
        tmp = value; // Hold a ref to the variable (prevent engine optim?)
    };
    
    // PowerArray test /////////////////////////
    // From : https://github.com/techfort/PowerArray
    function PowerArray(array) {
        var load = array || [],
            self = this;
        load.forEach(function(el) {
            self.push(el);
        });
    }
    PowerArray.prototype = new Array();
    PowerArray.prototype.forEach = function(fun) {
        var i = 0,
            len = this.length;
        for (; i < len; i++) {
            fun(this[i], i);
        }
    };
    
    // INIT : Declare and fill tests Arrays /////////////////////////
    var arr    = [];
    var arrBuf = new Float32Array() || [];
    var pa     = new PowerArray();
    
    for (var i = 0; i < 10000; i++) {
        arr[i]    = i;         // Standard Array
        arrBuf[i] = i + 0.1;   // Float32Array
        pa[i]     = i + 0.2;   // "PowerArray"
    }

Test runner

Ready to run.

Testing in
TestOps/sec
for()
for (var i = 0; i < arr.length; i++) process(arr[i])
ready
for() caching
for (var i = 0, length = arr.length; i < length; i++) process(arr[i])
ready
for() decrement
// Reversed
for (var i = arr.length - 1; i >= 0; i--) process(arr[i])
ready
for (..in)
for (var key in arr) process(arr[key])
ready
while() acting like for()
var i = 0;
while (i++ < arr.length) process(arr[i - 1])
ready
while() reverse
// Reversed
var length = arr.length;
while (length--) process(arr[length])
ready
while(..pop())
// Destructive + Reversed
var arr2 = arr.slice(0); // Copy
while(arr2.length) process(arr2.pop())
ready
while(..shift())
// Destructive
var arr2 = arr.slice(0); // Copy
while(arr2.length) process(arr2.shift())
ready
do while()
// Destructive
var arr2 = arr.slice(0); // Copy
do { process(arr2.shift())} while(arr2.length)
ready
forEach()
arr.forEach(function(value) { process(value) })
ready
map()
arr.map(function(value) { /* return */ process(value) })
ready
$.each()
$.each(arr, function(value) { process(value) })
ready
_.each()
_.each(arr, function(value) { process(value) })
ready
for with Float32Array
for (var i = 0; i < arrBuf.length; i++) process(arrBuf[i])
ready
forEach() with PowerArray
pa.forEach(function(val) { process(val); });
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.