Loops are programming’s infinite playlist: a way of repeating or iterating through something over and over until a particular condition is met. JavaScript has supported the classical for, while, do-while and for...in loops since its inception, with recent innovations in ECMAScript 5 & 6 (the latest JavaScript standards) adding even more.

Loops need to be handled with care, as they constitute one of the few ways it is possible to place JavaScript into an infinitely recursive state, eventually consuming the computer’s processor and hanging the browser.

for

for is the most common loop structure in JavaScript coding. It takes an initialization, a tested condition (which if evaluated true keeps the loop running) and the next step for the loop. Given an array called browncoats:

var browncoats =
	[ 'Malcom Reynolds', 'Zoe Washburne', 'Tracey Smith' ];

We can iterate through each “slot” in the array and report its data to the console:

for (var i = 0; i < browncoats.length; i++) {
	console.log(browncoats[i]);
}

In the past I had a hard time recalling the order of expressions for creating loop. I invented an acronym that was helpful to me, ICU: initial state, condition (to keep running) and “up” (incrementor). ICD is also possible, i.e. where the step decrements during the loop, counting down to 0.

I would also forget which expressions in the loop needed semi-colons. Just keep in mind that the semicolons go between the expressions, not before or after.

The result of the statement inside the loop:

Malcom Reynolds
Zoe Washburne
Tracey Smith

It’s important to note that the for loop does not constitute a new scope. This may cause the final value of i to be shared with the rest of your code, which is why it is explicitly set to 0 during initialization. Due to that fact, the following code would accomplish the same result as the example above:

var i = 0;
for (; i < browncoats.length; i++) {
	console.log(browncoats[i]);
}

(Note that the semi-colon after the missing initialization expression is kept in place).

This is also partly the reason why you’ll often see different variable names, such as j used in sequential loops.

Technically, if the loop only contains a single statement, it could all be placed on one line, without any need for curly braces. However, as code has a tendency to grow, it’s usually best to contain loop statements inside a block, even if they only start off as a single statement.

It’s also possible to leave out the condition block, so long as the loop still has an “escape clause” inside the statement block in the form of a break:

for (var i = 0; ;i++) {
if (i >= browncoats.length) break;
	console.log(browncoats[i]);
}

Note the changed test for the condition, and that it goes before any other action taken in the block. break can be a useful test, immediately bringing the loop to a halt and allowing the rest of your script to run.

Photograph by Stevie Gill, licensed under an Attribution-NonCommercial-NoDerivs 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.