javascript array traversal - efficiency

Question

So, I have seen this piece of code at alot of places:

for (var i = 0, len = myArray.length; i < len; i++) {

}

I am aware that is the length caching of the array.

Today I saw this:

var len = myArray.length; var i = 0; while(i++ < len)

Efficiency wise, both would be the same, right? Any input would be appreciated.

Decrementing is faster. Var i = myArray.length-1; while(i--){ //code here }. Have a look here - http://stackoverflow.com/questions/1340589/javascript-are-loops-really-faster-in-reverse — Mark Walters, Mar 29 '14 at 17:24
Firefox 28. Normal for loop is fastest: for (i = 0; i < arr.length; i++) [jsperf](http://jsperf.com/javascript-array-length/5) — alexeibs, Mar 29 '14 at 18:02
The bottom line is: "Premature optimization is the root of all evil" – Donald Knuth, 1974. You really shouldn't have to care about whether it's faster to increment or decrement – leave that up to compiler optimizations and focus on the actual logic instead. — Ingo Bürk, Mar 29 '14 at 18:06

Jared Farrish · Answer 1 · 2014-03-29T18:02:58.863

0

Setup a jsperf test case here:

http://jsperf.com/javascript-array-length

for (i = 0; i < arr.length; i++) {
    //nothing
}

var arrlength = arr.length;

for (i = 0; i < arrlength; i++) {
    //nothing
}

var arrlength = arr.length,
    i = 0;

while (arrlength > i++) {
    //nothing
}

var arrlength = arr.length;

while (arrlength--) {
    //nothing
}

If the test cases can be improved upon, please let me know in the comments. With a small number of tests, it seems IE11 is better optimized for the while cases, while Chrome 31 appears to prefer the second for loop (which is fairly similar to the while cases).

edited Mar 29 '14 at 18:02

answered Mar 29 '14 at 17:31

Jared Farrish

48,585
17
95
104

Exactly, thats what I was about to bring up, different browsers are showing different performances based on the loops, I guess its about making the right pick. – pj013 Mar 29 '14 at 17:35
In your forwards while loop, you iterate from `1` to `arr.length` (included), instead of from `0` to `arr.length-1` (included). – Oriol Mar 29 '14 at 17:52
@Oriol - While I don't think it will make an appreciable difference, I've modified that test. – Jared Farrish Mar 29 '14 at 18:03
@JaredFarrish Still the same problem. The performance should be the same, but if you iterate `[1,2,3]` like this, you get `2`,`3`,`undefined` instead of `1`,`2`,`3`. I would use `i = -1; while (++i < length) { }` instead. – Oriol Mar 29 '14 at 18:06
@Oriol - The purpose is for it to run a certain number of times. The utility of it inside the loop is beside the point. You are suggesting a micro-optimization. – Jared Farrish Mar 29 '14 at 18:10
@JaredFarrish No, I'm not optimizing it, I'm just pointing your code requires using `arr[i-1]` instead of `arr[i]`, so if someone uses your code to iterate arrays, he must be aware of it. – Oriol Mar 29 '14 at 18:23

friedi · Answer 2 · 2014-03-29T17:47:47.810

If you have a "normal" loop, you can also change i < len to i !== len. This makes the loop a lot faster, because the the check for inequality is very fast. The caching of the variable is not so important, but it do no harm.

So a fast loop in javascript can written as follows:

for (var i = 0, len = myArray.length; i !== len; i++) {

}

UPDATE

I made some performance tests a while ago and this was what I found out. But nowadays the browsers don't show the same behaviour, furthermore it's the opposite (< is faster than !==) . Here is a test I made just now: http://jsperf.com/loop-inequality-check

So forget about the posting above ;)

javascript array traversal - efficiency

2 Answers2