I learned from books that you should write for loop like this:
for(var i=0, len=arr.length; i < len; i++){
// blah blah
}
so the arr.length
will not be calculated each time.
Others say that the compiler will do some optimization to this, so you can just write:
for(var i=0; i < arr.length; i++){
// blah blah
}
I just want to know which is the best way in practice?
This question is related to
javascript
performance
loops
var arr = []; // The array
var i = 0;
while (i < arr.length) {
// Do something with arr[i]
i++;
}
i++ is faster than ++i, --i and i--
Also, you can save the last line doing arr[i++] the last time you need to access i (but this can be hard to debug).
You can test it here (with other loop tests): http://jsperf.com/for-vs-whilepop/5
"Best" as in pure performance? or performance AND readability?
Pure performance "best" is this, which uses a cache and the ++prefix operator (my data: http://jsperf.com/caching-array-length/189)
for (var i = 0, len = myArray.length; i < len; ++i) {
// blah blah
}
I would argue that the cache-less for-loop is the best balance in execution time and programmer reading time. Every programmer that started with C/C++/Java won't waste a ms having to read through this one
for(var i=0; i < arr.length; i++){
// blah blah
}
Another jsperf.com test: http://jsperf.com/while-reverse-vs-for-cached-length
The reverse while loop seems to be the fastest. Only problem is that while (--i) will stop at 0. How can I access array[0] in my loop then?
A basic while loop is often the fastest. jsperf.com is a great sandbox to test these types of concepts.
The most elegant solution I know of is using map.
var arr = [1,2,3];
arr.map(function(input){console.log(input);});
**cache the array length inside the loop ,some seconds of time will be eluded . Depends on the items in the array if there are more items in array there is major difference with respect to Ms of time*
**
sArr; //Array[158];
for(var i = 0 ; i <sArr.length ; i++) {
callArray(sArr[i]); //function call
}
***end: 6.875ms***
**
**
sArr; //Array[158];
for(var i = 0,len = sArr.length ; i < len ; i++) {
callArray(sArr[i]); //function call
}
***end: 1.354ms***
**
http://jsperf.com/caching-array-length/60
The latest revision of test, which I prepared (by reusing older one), shows one thing.
Caching length is not that much important, but it does not harm.
Every first run of the test linked above (on freshly opened tab) gives best results for the last 4 snippets (3rd, 5th, 7th and 10th in charts) in Chrome, Opera and Firefox in my Debian Squeeze 64-bit (my desktop hardware). Subsequent runs give quite different result.
Performance-wise conclusions are simple:
!==
instead of <
.shift()
-ing array is also efficient.tl;dr
Nowadays (2011.10) below pattern looks to be the fastest one.
for (var i = 0, len = arr.length; i !== len; i++) {
...
}
Mind that caching arr.length
is not crucial here, so you can just test for i !== arr.length
and performance won't drop, but you'll get shorter code.
PS: I know that in snippet with shift()
its result could be used instead of accessing 0th element, but I somehow overlooked that after reusing previous revision (which had wrong while loops), and later I didn't want to lose already obtained results.
While loop is a bit faster than for loop.
var len = arr.length;
while (len--) {
// blah blah
}
Use while loop instead
As of June 2016, doing some tests in latest Chrome (71% of the browser market in May 2016, and increasing):
I believe this thread is too old and it is misleading programmers to think they need to cache length, or use reverse traversing whiles with decrements to achieve better performance, writing code that is less legible and more prone to errors than a simple straightforward for loop. Therefore, I recommend:
If your app iterates over a lot of items or your loop code is inside a function that is used often, a straightforward for loop is the answer:
for (var i = 0; i < arr.length; i++) {
// Do stuff with arr[i] or i
}
If your app doesn't really iterate through lots of items or you just need to do small iterations here and there, using the standard forEach callback or any similar function from your JS library of choice might be more understandable and less prone to errors, since index variable scope is closed and you don't need to use brackets, accessing the array value directly:
arr.forEach(function(value, index) {
// Do stuff with value or index
});
If you really need to scratch a few milliseconds while iterating over billions of rows and the length of your array doesn't change through the process, you might consider caching the length in your for loop. Although I think this is really not necessary nowadays:
for (var i = 0, len = arr.length; i < len; i++) {
// Do stuff with arr[i]
}
It's just 2018 so an update could be nice...
And I really have to disagree with the accepted answer.
It defers on different browsers. some do forEach
faster, some for-loop
, and some while
here is a benchmark on all method http://jsben.ch/mW36e
arr.forEach( a => {
// ...
}
and since you can see alot of for-loop like for(a = 0; ... )
then worth to mention that without 'var' variables will be define globally and this can dramatically affects on speed so it'll get slow.
Duff's device run faster on opera but not in firefox
var arr = arr = new Array(11111111).fill(255);_x000D_
var benches = _x000D_
[ [ "empty", () => {_x000D_
for(var a = 0, l = arr.length; a < l; a++);_x000D_
}]_x000D_
, ["for-loop", () => {_x000D_
for(var a = 0, l = arr.length; a < l; ++a)_x000D_
var b = arr[a] + 1;_x000D_
}]_x000D_
, ["for-loop++", () => {_x000D_
for(var a = 0, l = arr.length; a < l; a++)_x000D_
var b = arr[a] + 1;_x000D_
}]_x000D_
, ["for-loop - arr.length", () => {_x000D_
for(var a = 0; a < arr.length; ++a )_x000D_
var b = arr[a] + 1;_x000D_
}]_x000D_
, ["reverse for-loop", () => {_x000D_
for(var a = arr.length - 1; a >= 0; --a )_x000D_
var b = arr[a] + 1;_x000D_
}]_x000D_
,["while-loop", () => {_x000D_
var a = 0, l = arr.length;_x000D_
while( a < l ) {_x000D_
var b = arr[a] + 1;_x000D_
++a;_x000D_
}_x000D_
}]_x000D_
, ["reverse-do-while-loop", () => {_x000D_
var a = arr.length - 1; // CAREFUL_x000D_
do {_x000D_
var b = arr[a] + 1;_x000D_
} while(a--); _x000D_
}]_x000D_
, ["forEach", () => {_x000D_
arr.forEach( a => {_x000D_
var b = a + 1;_x000D_
});_x000D_
}]_x000D_
, ["for const..in (only 3.3%)", () => {_x000D_
var ar = arr.slice(0,arr.length/33);_x000D_
for( const a in ar ) {_x000D_
var b = a + 1;_x000D_
}_x000D_
}]_x000D_
, ["for let..in (only 3.3%)", () => {_x000D_
var ar = arr.slice(0,arr.length/33);_x000D_
for( let a in ar ) {_x000D_
var b = a + 1;_x000D_
}_x000D_
}]_x000D_
, ["for var..in (only 3.3%)", () => {_x000D_
var ar = arr.slice(0,arr.length/33);_x000D_
for( var a in ar ) {_x000D_
var b = a + 1;_x000D_
}_x000D_
}]_x000D_
, ["Duff's device", () => {_x000D_
var len = arr.length;_x000D_
var i, n = len % 8 - 1;_x000D_
_x000D_
if (n > 0) {_x000D_
do {_x000D_
var b = arr[len-n] + 1;_x000D_
} while (--n); // n must be greater than 0 here_x000D_
}_x000D_
n = (len * 0.125) ^ 0;_x000D_
if (n > 0) { _x000D_
do {_x000D_
i = --n <<3;_x000D_
var b = arr[i] + 1;_x000D_
var c = arr[i+1] + 1;_x000D_
var d = arr[i+2] + 1;_x000D_
var e = arr[i+3] + 1;_x000D_
var f = arr[i+4] + 1;_x000D_
var g = arr[i+5] + 1;_x000D_
var h = arr[i+6] + 1;_x000D_
var k = arr[i+7] + 1;_x000D_
}_x000D_
while (n); // n must be greater than 0 here also_x000D_
}_x000D_
}]];_x000D_
function bench(title, f) {_x000D_
var t0 = performance.now();_x000D_
var res = f();_x000D_
return performance.now() - t0; // console.log(`${title} took ${t1-t0} msec`);_x000D_
}_x000D_
var globalVarTime = bench( "for-loop without 'var'", () => {_x000D_
// Here if you forget to put 'var' so variables'll be global_x000D_
for(a = 0, l = arr.length; a < l; ++a)_x000D_
var b = arr[a] + 1;_x000D_
});_x000D_
var times = benches.map( function(a) {_x000D_
arr = new Array(11111111).fill(255);_x000D_
return [a[0], bench(...a)]_x000D_
}).sort( (a,b) => a[1]-b[1] );_x000D_
var max = times[times.length-1][1];_x000D_
times = times.map( a => {a[2] = (a[1]/max)*100; return a; } );_x000D_
var template = (title, time, n) =>_x000D_
`<div>` +_x000D_
`<span>${title} </span>` +_x000D_
`<span style="width:${3+n/2}%"> ${Number(time.toFixed(3))}msec</span>` +_x000D_
`</div>`;_x000D_
_x000D_
var strRes = times.map( t => template(...t) ).join("\n") + _x000D_
`<br><br>for-loop without 'var' ${globalVarTime} msec.`;_x000D_
var $container = document.getElementById("container");_x000D_
$container.innerHTML = strRes;
_x000D_
body { color:#fff; background:#333; font-family:helvetica; }_x000D_
body > div > div { clear:both }_x000D_
body > div > div > span {_x000D_
float:left;_x000D_
width:43%;_x000D_
margin:3px 0;_x000D_
text-align:right;_x000D_
}_x000D_
body > div > div > span:nth-child(2) {_x000D_
text-align:left;_x000D_
background:darkorange;_x000D_
animation:showup .37s .111s;_x000D_
-webkit-animation:showup .37s .111s;_x000D_
}_x000D_
@keyframes showup { from { width:0; } }_x000D_
@-webkit-keyframes showup { from { width:0; } }
_x000D_
<div id="container"> </div>
_x000D_
I have tried some other ways to iterate a huge array and found out that halving the array length and then iterating both halves in a single loop is faster. This performance difference can be seen while processing huge arrays.
var firstHalfLen =0;
var secondHalfLen = 0;
var count2=0;
var searchterm = "face";
var halfLen = arrayLength/2;
if(arrayLength%2==halfLen)
{
firstHalfLen = Math.ceil(halfLen);
secondHalfLen=Math.floor(halfLen);
}
else
{
firstHalfLen=halfLen;
secondHalfLen=halfLen;
}
for(var firstHalfCOunter=0,secondHalfCounter = arrayLength-secondHalfLen;
firstHalfCOunter < firstHalfLen;
firstHalfCOunter++)
{
if(mainArray[firstHalfCOunter].search(new RegExp(searchterm, "i"))> -1)
{
count2+=1;
}
if(secondHalfCounter < arrayLength)
{
if(mainArray[secondHalfCounter].search(new RegExp(searchterm, "i"))> -1)
{
count2+=1;
}
secondHalfCounter++;
}
}
Some performance comparison (using timer.js) between the cached length for-loop VS the above method.
If the order is not important, I prefer this style:
for(var i = array.length; i--; )
It caches the length and is much shorter to write. But it will iterate over the array in reverse order.
This looks to be the fastest way by far...
var el;
while (el = arr.shift()) {
el *= 2;
}
Take into account that this will consume the array, eating it, and leaving nothing left...
As of September 2017 these jsperf tests are showing the following pattern to be most performant on Chrome 60:
function foo(x) {
x;
};
arr.forEach(foo);
Is anyone able to reproduce?
If you want a faster for loop, define your variables outside the loop and use below syntax
const iMax = lengthOftheLoop;
var i = 0;
for (; i < iMax; i++) {
console.log("loop"+i);
}
reference: https://medium.com/kbdev/voyage-to-the-most-efficient-loop-in-nodejs-and-a-bit-js-5961d4524c2e
As of 2019 WebWorker has been more popular, for large datasets, we can use WebWorker to process much much faster by fully utilize multi-core processors.
We also have Parallel.js which make WebWorker much easier to use for data processing.
It's the year 2017.
I made some tests.
https://jsperf.com/fastest-way-to-iterate-through-an-array/
Looks like the while
method is the fastest on Chrome.
Looks like the left decrement (--i
) is much faster than the others (++i
, i--
, i++
) on Firefox.
This approach is the fasted on average. But it iterates the array in reversed order.
let i = array.length;
while (--i >= 0) {
doSomething(array[i]);
}
If the forward order is important, use this approach.
let ii = array.length;
let i = 0;
while (i < ii) {
doSomething(array[i]);
++i;
}
2014 While
is back
Just think logical.
Look at this
for( var index = 0 , length = array.length ; index < length ; index++ ) {
//do stuff
}
for
loop has 3 parametersNow tell me why this should be faster than:
var length = array.length;
while( --length ) { //or length--
//do stuff
}
while
has only one parameterI was totally confused when Chrome 28 showed that the for loop is faster than the while. This must have ben some sort of
"Uh, everyone is using the for loop, let's focus on that when developing for chrome."
But now, in 2014 the while loop is back on chrome. it's 2 times faster , on other/older browsers it was always faster.
Lately i made some new tests. Now in real world envoirement those short codes are worth nothing and jsperf can't actually execute properly the while loop, because it needs to recreate the array.length which also takes time.
you CAN'T get the actual speed of a while loop on jsperf.
you need to create your own custom function and check that with window.performance.now()
And yeah... there is no way the while loop is simply faster.
The real problem is actually the dom manipulation / rendering time / drawing time or however you wanna call it.
For example i have a canvas scene where i need to calculate the coordinates and collisions... this is done between 10-200 MicroSeconds (not milliseconds). it actually takes various milliseconds to render everything.Same as in DOM.
BUT
There is another super performant way using the for loop
in some cases... for example to copy/clone an array
for(
var i = array.length ;
i > 0 ;
arrayCopy[ --i ] = array[ i ] // doing stuff
);
Notice the setup of the parameters:
Said that, this confirms that machines like the --
writing that i was thinking to make it a little shorter and remove some useless stuff and wrote this one using the same style:
for(
var i = array.length ;
i-- ;
arrayCopy[ i ] = array[ i ] // doing stuff
);
Even if it's shorter it looks like using i
one more time slows down everything.
It's 1/5 slower than the previous for
loop and the while
one.
Note: the ;
is very important after the for looo without {}
Even if i just told you that jsperf is not the best way to test scripts .. i added this 2 loops here
http://jsperf.com/caching-array-length/40
And here is another answer about performance in javascript
https://stackoverflow.com/a/21353032/2450730
This answer is to show performant ways of writing javascript. So if you can't read that, ask and you will get an answer or read a book about javascript http://www.ecma-international.org/ecma-262/5.1/
The absolute fastest way to loop through a javascript array is:
var len = arr.length;
while (len--) {
// blah blah
}
See this post for a full comparison
Try this:
var myarray =[],
i = myarray.lenght;
while(i--){
// do somthing
}
I'm always write in the first style.
Even if a compiler is smart enough to optimize it for arrays, but still it smart if we are using DOMNodeList here or some complicated object with calculated length?
I know what the question is about arrays, but i think it is a good practice to write all your loops in one style.
Fastest approach is the traditional for loop. Here is a more comprehensive performance comparison.
https://gists.cwidanage.com/2019/11/how-to-iterate-over-javascript-arrays.html
Source: Stackoverflow.com