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
– maioman

2016-05-17 15:16:30 +00:00
Commented May 17, 2016 at 15:16 — maioman
– maioman, Commented May 17, 2016 at 15:16

Tushar · Accepted Answer · 2016-05-17 15:16:40Z

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, 2016 at 15:16

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 10:28:35Z

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, 2017 at 10:28

CommunityBot

11 silver badge

answered May 17, 2016 at 15:18

Mark Reed

96k17 gold badges149 silver badges189 bronze badges

1 Comment

Роман Парадеев Over a year ago

I believe, this case is even worse: browser will query DOM for each iteration because the collection could have been changed since previous step.

Collectives™ on Stack Overflow

W3C JavaScript for loop style

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related