Why does i + 2 result in an infinite loop where i += 2 doesn't? [duplicate]

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?

Solution 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.

Solution 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.