JavaScript loop best practice

Question

I'm doing a tutorial on JavaScript. The following is from a section on performance:

Each statement in a loop, including the for statement, is executed for each iteration of the loop. Statements or assignments that can be placed outside the loop will make the loop run faster.

This is given as an example of bad code:

var i;
for (i = 0; i < arr.length; i++) {

And this is given as an example of good code:

var i;
var l = arr.length;
for (i = 0; i < l; i++) {

This is not something I can remember seeing as a best practice in languages that are more focused on performance than JavaScript. In fact, the bad code example seems to be preferred.

Is this best practice something particular for JavaScript, or is is true for other languages?

• mplungjan: For longer arrays, it is best practice to cache the length. I personally prefer to keep the vars together and never use l as a var name due to ambiguity : for (var i=0, n=arr.length; i<n; i++) { - If the iteration changes the length of the array, then you need to NOT cache the length
• CertainPerformance: It should be preferable regardless of language - you don't want to check the length of an array every iteration (unless you're expecting it to change), it would be better to put the length of the array into a variable, and then check that variable. That said, you should consider a better tutorial site than W3schools, which is notoriously unreliable
• Emil S. Jørgensen: To be honest that depends on the language. May not even be true for every implementation of JavaScript. If the length parameter of the array is static on access (as opposed to computed on access), creating a new variable would only use more memory. If the parameter recomputes on every request, then you would save on calculation time.
• mplungjan: Better reference is MDN
• RobG: What are your criteria for "best"? So-called "best practice" can only be determined based on some criteria for "best", e.g. robustness, reliability, maintainability, etc. Performance should be well down the list unless it's a particular concern.

Answer 1

Bad Practice

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

For every iteration in the loop, the condition is evaluated. If it is being arr.length then every time you are trying to access length property from arr. However, on the other hand, if you are storing it in a variable you are avoiding that operation.

• Nina Scholz: it is a good practice, if the array changes the length in the loop.
• Q-bertsuit: I agree, that makes sense. I'm just curious why this not recommended or mentioned in other languages as far as i know. Look at how to iterate over a vector in C++ for example.
• mplungjan: @NinaScholz - I consider it bad practice to change an array's size in a for loop :) I believe the method is then to count backwards
• RobG: If the array is always small, say less than 1,000 elements, then the difference in performance between caching length and reading it on each iteration is likely trivial (and likely that is optimised out for simple loops where the length doesn't change).

Answer 2

Of all the ways to loop in javascript, the for-in loop is the safest in my opinion.

It can loop through the properties in an object.

let user = {first:"billy", last:"bob"};
for(let i in user){
 console.log(i);
 console.log(user[i]);
}

It doesn't throw an error if the variable is null

let empty = null;
for (let i in empty){
}

It works with arrays

let arr = [3,2,1];
for (let i in arr){
 console.log(i);
 console.log(arr[i]);
} 

.map .filter .reduce .forEach throw errors with anything but arrays(null, objects etc)

So if you want one loop that works for everything, for-in is you what you want.