JavaScript in Plain Language (2015)

PART II: ENTERING THE SECOND REALM

2.6 The for loop

We are going to learn how to fill in the form request for a loop in the style of a “for loop” because it will be used on our next lab project.

The idea of a for loop is to repeat itself for a specified amount of times.

The basic form declaration has a header and a body as shown on the following pseudo code:

for (x starting at zero; and for x less than 5; increment x) { execute this code }

Fig 9

We have three instructions to be evaluated in this form, hence the semicolon separating on the first two instructions (to make them independent of each other).

for x starting at zero;

Here JavaScript stores x as a temporary variable with the value of zero. The name x is unimportant, most programmers use the name i instead. The correct script is
for(var x = 0; or for (var i = 0; etc...

and for x less than 5;

At this point JavaScript evaluates this condition. Since x is < 5 because it is zero, the condition is true and JavaScript executes the code in the body once. The correct expression is:
x < 5;

increment x ++

After JavaScript runs the code block the first time (step3), it returns to the for loop declaration and it increments the value of x (step4). Now x is 1 instead of zero. The correct increment script is:
x++ or x = x +1
Since x++ is the last expression to be evaluated, the semicolon is not necessary. Actually it is undesirable since it will trigger an error, preventing JavaScript from running the code block because it thinks it is at the end of the for loop. The first semicolon after x++ should be at the end of the first executable statement inside of the body code block.

Once JavaScript runs the loop the first time, it returns to the form for a second evaluation. The second evaluation will be as follows:

(For x starting at one; and for x less than 5; increment x) { execute this code }.

On the second iteration x is 1 but still less than 5 and therefore the code block is executed again, and x is incremented again at the end. And so on until x becomes 5.

Let’s create a simple for loop to see how it works.

The most common name for the temporary variable to be used as x is i. Perhaps the reason is because it reminds us of the word index. So let’s use the classic name i instead of x:

for(var i = 0; i < 5; i++)

That is the header form which means:

for this declared variable i which starts with the value of zero; as long as i is less than five; increment i by 1 after each loop cycle.

On line 2 we include the executable instructions in the code block. These instructions will be repeated 5 times by JavaScript:

The following image illustrates the concept:

Fig 10

· Please note: If you code this loop and paste it onto your console you may have a one line result with a prefix of (5) telling you that the Console ran it 5 times. This is normal behavior of Consoles. They don’t usually repeat the same output more than once in order to save display real estate, they just tell you how many times the loop ran with it, but in real life you would get five lines displayed. However, if the print is different for each time, then the Console displays all the 5 iterations separately.

To see a real display of a loop at work, replace console.log("Say hi to Mary!"); with
console.log(i);

Now it prints the value of variable i in each of the loop repetitions and since the output is different each time, the Console must display each one of the iterations.

If you want a more presentable output you can try this one:
console.log("the value of i is now " + i);

And you should get:
the value of i is now 0
the value of i is now 1
the value of i is now 2
the value of i is now 3
the value of i is now 4

It displays 0 through 4 because the count of i started at 0 and the fifth time is 4. This is ok, it still loops 5 times. However, if your intention is to display 1 through 5, then make i equals 1 from the start, instead of from zero.