Question

I am at a loss how best to approach for loops in JavaScript. Hopefully an understanding of for loops will help shed light on the other types of loops.

Sample code

for (var i=0; i < 10; i=i+1) {
    document.write("This is number " + i);
}

My understanding is that when i has been initialized, it starts with the value of 0 which then evaluated against the condition < 10. If it is less than 10, it the executes the statement document.write("This is number + i); Once it has executed the preceding statement, only then does it increment the next value by 1.

Guides I have consulted:

1. http://www.functionx.com/javascript/Lesson11.htm
2. http://www.cs.brown.edu/courses/bridge/1998/res/javascript/javascript-tutorial.html#10.1
3. http://www.tizag.com/javascriptT/javascriptfor.php

Now the guide at http://www.functionx.com/javascript/Lesson11.htm seems to indicate otherwise i.e.

To execute this loop, the Start condition is checked. This is usually
the initial value where the counting should start. Next, the Condition
is tested; this test determines whether the loop should continue. If
the test renders a true result, then the Expression is used to modify
the loop and the Statement is executed. After the Statement has been
executed, the loop restarts.

The line that throws me is "If the test renders a true result, then the Expression is used to modify the loop and the Statement is executed". It seems to imply that because 0 is less than 10, increment expression is modified which would be 0 + 1 and THEN the statement, e.g. document.write is executed.

My problem

What is the correct way to interpret for loops? Is my own comprehension correct? Is the same comprehension applicable to other programming languages e.g. PHP, Perl, Python, etc?

Answer 1

Your quoted source is wrong, and we can prove it…

The basis of the for loop has four separate blocks which may be executed:

for(initialise; condition; finishediteration) { iteration }

Fortunately we can execute a function in each of these blocks. Therefore we can create four functions which log to the console when they execute like so:

var initialise = function () { console.log("initialising"); i=0; }
var condition = function () { console.log("conditioning"); return i<5; }
var finishediteration = function () { console.log("finished an iteration"); i++; }
var doingiteration = function () { console.log("doing iteration when `i` is equal", i); }

Then we can run the following, which places the above functions into each block:

for (initialise(); condition(); finishediteration()) {
    doingiteration();
}

Kaboom. Works.

If you viewing this page using Safari on the Mac then you can AppleAlt + I and copy the above two snippets, in order, into the console and see the result.

EDIT, extra info….

Also… the finished iteration block is optional. For example:

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

does work.