W3C JavaScript for loop style

Question

I was looking through the W3C Javascript Best Practices and I noticed that they write their for-loops in a different way.

var f = document.getElementById('mainform');
var inputs = f.getElementsByTagName('input');
for(var i=0,j=inputs.length;i<j;i++){
  if(inputs[i].className === 'mandatory' &&
     inputs[i].value === ''){
    inputs[i].className += ' error';
  }
}

They assign the inputs length value to j and then compare j with i. Instead of just directly comparing inputs.length with i. They don't do that everywhere in the guide just in some places. Is there a reason other than a preference for writing a for-loop this way?

caching length increases loop performance – maioman May 17 '16 at 15:16 — maioman, May 17 '16 at 15:16

score 5 · Answer 1 · answered May 17 '16 at 15:16

5

Slight performance improvement.

Instead of reading length property from array again after each iteration, use cached version.

This will be very very small amount of time that this can be ignored for moderate sized arrays.

answered May 17 '16 at 15:16

Tushar

85,780
21
159
179

score 3 · Accepted Answer · edited May 23 '17 at 10:28

3

As I mentioned here, it's a performance thing. Referencing inputs.length would be a runtime attribute lookup in a hash table at the top of every loop iteration. Caching it in a local variable avoids that, and the results can be dramatic, especially on an interpreter that doesn't have JIT compilation.

edited May 23 '17 at 10:28

Community

1
1

answered May 17 '16 at 15:18

Mark Reed

91,912
16
138
175

1

I believe, this case is even worse: browser will query DOM for each iteration because the collection could have been changed since previous step. – Роман Парадеев May 17 '16 at 19:28

W3C JavaScript for loop style

2 Answers2