Question

Let’s imagine we should get some data…

var data = [];

//some code omitted that might fill in the data (though might not)

Then we need to do something with the data. And my question is how to do it more effectively. Like so?:

if (data.length) {
    for (var i = 0; i < data.length; i++) {
        //iterate over the data and do something to it
    }
}

Or just like so?:

for (var i = 0; i < data.length; i++) {
    //iterate over the data and do something to it
}

The point is whether to check the length before iterating or not?

Answer 1

I don’t think it’s worth checking whether to execute the for loop based on the length of data as it probably won’t make much difference performance-wise if the for loop is only executed a few times.

But generally it is faster to get the length first rather than putting it as i<data.length as it’ll need to access the variable each time. As for which way is the most efficient to loop through data, different browsers are optimized for different kinds of loops. However, it’s only IE which is seriously slow (orders of magnitude slower than other browsers in the below tests) so I think optimizing for other browsers may not be worth it.

Here’s the results for the following benchmarks (the fastest indicated by + and slowest indicated by -):

           FF      Chrome  Safari  Opera   IE6      IE7      IE8 
Method 1  +0.163+  0.221   0.246   0.269  -11.608- -12.214- -7.657-
Method 2   0.175  +0.133+  0.176  +0.147+   8.474    8.752   3.267
Method 3   0.206   0.235   0.276   0.245    8.002    8.539   3.651
Method 4   0.198   0.372   0.447   0.390   +6.562+  +7.020+  2.920
Method 5   0.206   0.372   0.445  -0.400-   6.626    7.096  +2.905+
Method 6   0.176   0.167  +0.175+  0.223    7.029    8.085   3.167
Method 7  -0.263- -0.567- -0.449-  0.413    6.925    7.431   3.242

Method 1: Using “standard” for loops:

for (var i=0; i<data.length; i++) {
    var x = data[i]
}

Method 2: Using “standard” for loops, assigning length so it doesn’t have to access each time:

for (var i=0, len=data.length; i<len; i++) {
    var x = data[i]
}

Method 3: This is similar to the method jQuery uses in $.each(). Note the assigning to len so that it doesn’t have to get the length every time.

for (var x=data[0], len=data.length, i=0; i<len; x=data[++i]) {}

Method 4: Using while loops, going forwards. WARNING: needs each item in the array to evaluate to true, i.e. not false, 0, null, undefined, '' etc!

var x, i=0
while (x = data[i++]) {}

Method 5: The same as method 4, only using for to do the same:

for (var x,i=0; x=data[i++];) {}

Method 6: Looping through the loop backwards using while:

var i = data.length
while (i--) {
    var x = data[i]
}

Method 7: Using method 4/method 5, but without needing items to evaluate to true, replacing x = data[i++]:

var x, i=0, len=data.length
while ((x=data[i++]) || i<len) {}

This first checks whether data[i++] evaluates to true then checks whether it’s the last item so it can have similar performance in IE with fewer problems with null and false etc in the arrays. Note that when using while vs for in this case there wasn’t a noticeable difference, but I prefer while as I think it’s more clear.

I generally don’t like to optimize unless there’s a specific long-running task as it often comes at a cost of readability – please only do it if you’ve got a specific case where you’ve got lots of data to load etc 🙂

EDIT: Because methods 4/5 were so fast on IE, added a version with fewer side effects.

EDIT 2: Redid all of the tests, this time without any browser extensions and over a longer period of time. Here’s the code for the sake of completeness (sorry for making this post so long:)

function Tmr() {
    this.tStart = new Date()
}

Tmr.prototype = {
    Time: function() {
        var tDate = new Date()
        var tDiff = tDate.getTime() - this.tStart.getTime()
        var tDiff = tDiff / 1000.0 // Convert to seconds
        return tDiff
    }
}

function normalfor(data) {
    for (var i=0; i<data.length; i++) {
        var x = data[i]
    }
}

function fasterfor(data) {
    for (var i=0, len=data.length; i<len; i++) {
        var x = data[i]
    }
}

function jqueryfor(data) {
    for (var x=data[0], len=data.length, i=0; i<len; x=data[++i]) {

    }
}

function whileloop(data) {
    var x, i=0
    while (x = data[i++]) {

    }
}

function fixedwhileloop(data) {
    var x, i=0, len=data.length
    while ((x=data[i++]) || i<len) {

    }
}

function forwhileloop(data) {
    for (var x,i=0; x=data[i++];) {

    }
}

function fixedforwhileloop(data) {
    for (var x,i=0,len=data.length; (x=data[i++])||i<len; ) {

    }
}

function whilebackwards(data) {
    var i = data.length
    while (i--) {
        var x = data[i]
    }
}

var undefined
var NUMTIMES = 1000000
var data = '$blah blah blah blah blah|'.split('')

function test() {}
function getfntime(fn) {
    // Get the rough time required when executing one of the above functions
    // to make sure the `for` loop and function call overhead in `run` doesn't 
    // impact the benchmarks as much
    var t = new Tmr()
    for (var xx=0; xx<NUMTIMES; xx++) {
        fn()
    }
    return t.Time()
}
var fntime = getfntime(test)

function run(fn, i){
    var t = new Tmr()
    for (var xx=0; xx<NUMTIMES; xx++) {
        fn(data)
    }
    alert(i+' '+(t.Time()-fntime))
}

setTimeout('run(normalfor, "1:normalfor")', 0)
setTimeout('run(fasterfor, "2:fasterfor")', 0)
setTimeout('run(jqueryfor, "3:jqueryfor")', 0)
setTimeout('run(whileloop, "4:whileloop")', 0)
setTimeout('run(forwhileloop, "5:forwhileloop")', 0)
setTimeout('run(whilebackwards, "6:whilebackwards")', 0)
setTimeout('run(fixedwhileloop, "7:fixedwhileloop")', 0)
//setTimeout('run(fixedforwhileloop, "8:fixedforwhileloop")', 0)