Click here to Skip to main content
Click here to Skip to main content

Perfomance of for loop

By , 6 Dec 2012
 

Introduction

I like looking at the code behind of websites I admire. In doing so I think I've seen one of the most common mistakes when it comes to JavaScript performance. This is not something that would popup quickly because the effect is minimal. But I like coding, so I also like doing right.

Background

The type of loop that I often see coded wrong and which I also used to code wrong in the past is the for loop. And I believe the reason for doing it wrong is, not fully understanding what the syntax does.

This is the example from http://www.w3schools.com/js/js_loop_for.asp:

for (statement 1; statement 2; statement 3)
{
//  the code block to be executed
}

This goes on stating;

Statement 1 is executed before the loop (the code block) starts.

Statement 2 defines the condition for running the loop (the code block).

Statement 3 is executed each time after the loop (the code block) has been executed.

Although this is essentially right, they forget to say that Statement 2 will be executed every time the loop ends a code block.

The wrong example

for(var i=0; i < myarray.length; i++) {
 //do something
}

Why is this wrong?

myarray.length will be executed after every code block. Now if this array is small, the JavaScript engine will answer this question quickly. But what if the condition would be some function that could take a while?

The right example

for(var i=0, j=myarray.length; i < j; i++) {
 //do something
}

Now the length of myarray will only be executed at the start of the loop.

Conclusion

This might seem like a very little win if it comes to performance. But I believe people should always do things right. If myarray.length would be something like calculateSomeVariableLengthByRunningLengthyFunction(), this could end up as a performance penalty.

And even the w3schools tutorial doesn't explain this the right way.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Sebastiaan Meijerink
Software Developer (Senior)
Netherlands Netherlands
Member
I'm a developer with 12+ years of experience. Starting of on a MVS mainframe, moving to building big multi-tier ERP systems with unix backends, to building web-based BI-Portals. I've seen a lot of different languages, environments and paradigmes.
 
At this point my main interest is webdevelopment. Mainly javascript and ASP.NET. But I also like getting my hands dirty on some PHP.
 
I've been a member of CodeProject for many years, but only recently started writing some articles. I hope someone will enjoy them.

Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board.
Search this forum  
    Spacing  Noise  Layout  Per page   
GeneralRe: Compiler optimization?memberSebastiaan Meijerink6 Nov '12 - 5:49 
Javascript is not compiled before it is run. The javascript engines like the v8 one would might in deed be smart enough to cache this for you. But you can still actually benchmark the type of constructions and see the difference.
 
Optimizing your code is always a good thing in javascript, since the engines running you code aren't all as effective as the v8 engine.
GeneralRe: Compiler optimization?memberpeterboulton6 Nov '12 - 6:35 
Sorry, of course you are quite right. I still had my C++ blinkers on and I didn't notice the 'Javascript.Net' tag at the side!
 
Pete
GeneralMy vote of 5memberNeeraj_Maurya6 Nov '12 - 3:10 
I like this things. we used to write this code quite often but ignore the right way of doing this.thanks

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Permalink | Advertise | Privacy | Mobile
Web01 | 2.6.130523.1 | Last Updated 6 Dec 2012
Article Copyright 2012 by Sebastiaan Meijerink
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid