How are for loops executed in javascript?

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

Think of a for loop as the following

for(initializers; condition; postexec) {
    execution
}

1. When the loop is first started the code var i = 0 is run. This initializes the variable that you will be testing for inside the loop

2. Next the loop evaluates the i < 10 expression. This returns a boolean value which will be true for the first 10 times it is run. While this expression keeps evaluating to true the code inside the loop is run.

   document.write("This is number " + i);

3. Each time after this code is run the last part of the loop i++ is executed. This code in this example adds 1 to i after each execution.

After that code is executed the condition of the loop is check and steps 2 and 3 repeat until finally the condition is false in which case the loop is exited.

This the way loops work in the languages you mentioned.

Answer 2

Lets have a look at the corresponding section in the ECMAScript specification:

The production
IterationStatement : for ( var VariableDeclarationListNoIn ; Expression_opt ; Expression_opt) Statement
is evaluated as follows:

1. Evaluate VariableDeclarationListNoIn.
2. Let V = empty.
3. Repeat
  a. If the first Expression is present, then
     i. Let testExprRef be the result of evaluating the first Expression.
     ii. If ToBoolean(GetValue(testExprRef)) is false, 
         return (normal, V, empty).
  b. Let stmt be the result of evaluating Statement.
  ...
  f. If the second Expression is present, then
     i. Let incExprRef be the result of evaluating the second Expression.
     ii. Call GetValue(incExprRef). (This value is not used.)

As you can see, in step 1, the variable assignment is evaluated. In step 3a, the condition is tested. In step 3b, the loop body is evaluated, and after that the third expression is evaluated in step 3f.

Therefore your understanding of the for loop is correct.

---

It is to assume that it works the same way in other languages, since the for loop is such a common statement in programming languages (note that Python does not have such a statement). But if you want to be absolutely certain, you better consult their specification as well.

Answer 3

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.

Answer 4

The second reference is wrong. Your explanation is correct.

Answer 5

Another way to think about it, if this helps you:

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

Answer 6

This is for statement syntax:

for(initalize, condition, increment) {
    Do_some_things();
}

initalize Will executed only one time when for begin then it execute Do_some_things(); statement, and while condition still true it will execute increment and then Do_some_things();. if co condition false, for would exit.

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

var i=0 will execute one time (initalize). i < 10 condition was always checked after a loop. i=i+1 will execute after check i < 10 and result is true. Value of i is: 0, 1, 3, 4, 5, 6, 7, 8, 9 (10 times loop)