For Loops without Bodies

Beyond simple increment loops with Javascript

For loops in javascript are typically written in ways that look something like this:

for (initialization; condition; do-after-each-iteration) {
loop-body
}

The initialization block contains code that the javascript engine will execute before it starts looping. In terms of how this works under the hood, think of it as code that runs just one time, before the loop starts up.

The condition block contains code the javascript engine will execute at the beginning of each iteration, in order to determine if it should continue with the iteration. Whatever this code does, it must return true or false. If it returns true, the engine will proceed with the iteration; if it returns false, the engine will skip past the end of the loop and leave it behind.

The loop-body block contains code the javascript engine will execute on each iteration, after the condition block is executed (and returns true).

The do-after-each-iteration block contains code the javascript engine will execute on each iteration, after the loop-body block is executed.

Here is an example. I can print out each integer from 0 to 9 in the following way.

for (var i = 0; i < 10; i++ ) {
console.log(i);
}

Before the loop starts, the initialization block executes: in this case it sets i to 0.

Then the loop starts on the first iteration. First it executes the condition block. In this case, it tests if i < 10, which is true, since i is 0. Since it returns true, the javascript engine moves on to the loop-body block, and executes that code. In this case, it simply prints the value of i to the console. Last, it executes the do-after-each-iteration block: it increases the value of i by 1.

Then it does another iteration: it first executes the condition block, and if that returns true it then executes the loop-body block, and finally it executes the do-after-each-iteration block. It repeats like this until the condition block returns false.

But notice that the whole loop-body is not needed. In fact, curly braces aren’t even required. This is perfectly valid:

for (var i = 1; i < 11; i++);

That won’t log anything to the console (since there is no console.log call), but nevertheless, the javascript engine will still execute this code. That is to say, it will still iterate over i ten times, incrementing its value by 1 on each pass.

Another thing to note is that the initialization, condition, and do-after-each-iteration blocks can consist of multiple statements (separated by commas), not just one statement each:

for (statement 1, statement 2, statement 3; statement 1, statement 2; statement 1, statement 2);

White space and new lines can make this much more readable:

for (
statement 1, statement 2, statement 3;
statement 1, statement 2;
statement 1, statement 2
);

Multiline comments are also possible, to make things even clearer (inline comments are not possible):

for (
    /* Initialization statements */
statement 1, statement 2, statement 3;
    /* Condition statements */
statement 1, statement 2;
    /* Do-after-each-iteration statements. */
statement 1, statement 2
);

Here is an example:

for (
    /* Statements to execute before the loop starts */
var i = 0,
greeting = ‘hello’;
    /* Statements to run before each iteration. */
greeting = greeting.slice(0, -1),
i < 5;
    /* Statements to run after each iteration. */
console.log(i + ‘: ‘ + greeting),
i++
);

A word about the statements in the condition block:

  1. You can have as many statements in the condition block as you like, but the last one must return true or false.
  2. In the condition block, more than one statement can return true or false, but only the last one will determine if the loop proceeds with the iteration.
  3. As long as the last statement returns true or false, you can have as many other statements as you like that return other data types. Those return values, however, will be ignored.

The scope of these blocks is global. They are not closed in the loop’s body. (This makes sense. There is no body in the present example set, but even if there were, for is not a function. It is a control structure. So it does not have function scope.)

This means that if you set variables in these blocks, they will persist outside the loop. For instance, in the following example, a random variable called x gets set to the square of i in the condition block, but x is then available outside the loop:

for (
    /* Statements to execute before the loop starts */
var i = 0,
x,
greeting = ‘hello’;
    /* Statements to run before each iteration. */
greeting = greeting.slice(0, -1),
x = i * i,
i < 5;
    /* Statements to run after each iteration. */
console.log(i + ‘: ‘ + greeting),
i++
);
console.log(x); // Prints out "25"
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.