Working with loops

With a for loop, we can run a group of statements a set number of times through the use of a counter, a variable that tracks the number of times the group of statements has been run. To create a for loop, we set an initial value for the counter variable and each time our command block is executed, we change the value of the counter. When the value of the counter variable reaches our stopping value, the loop will end. A general syntax for creating a JavaScript loop is:

for (startingValue, condition, iterationValue) {
JavaScript statements that you want to execute repeatedly
startingValue = the initial value of the counter variable
condition = a Boolean expression that must be true for the loop to continue and must become false for the loop to stop
iterationValue = a value to change the value of the counter variable

Let's create a for loop that will print numbers 1 through 5. The following shows the JavaScript code for creating a for loop:

<script language="javascript">
for (counter=1; counter <=5; counter++) {
document.write(counter + "<br>");

On line 2, we start our for loop with the JavaScript keyword for. With counter=1;, we declare a variable called counter and it is set to 1. The purpose of this statement is to set a initial value for our loop. The code counter <=5; is the Boolean expression. The purpose of this code is to stop the for loop after the code inside the for loop has executed 5 times. The counter++ simply adds 1 each time the command inside the loop is executed. The following shows the output of this loop:

So how did we get this output? Let's review how the for loop code works. In our example, we start our counter variable with 1. Next, the Boolean expression, counter <=5;, checks if the value of counter is less than or equal to 5. Is it? Yes, because we started our for loop with 1 and it is less than 5. Then, with counter++ we add 1 to counter; so counter will become 2, after the print statement inside the for loop has executed. That will complete our first iteration. At the end of first iteration, the number 1 would be printed to the screen, the value of the counter variable would be 2.

The for loop does not end executing yet because our Boolean expression is still true. Our counter variable is 2, which is less than 5, so the print statement inside the for loop will print 2. Then, the value of counter will be updated again with 1, changing counter variable to 3. The for loop will continue to run like this until the value of counter reaches 6, at which point, the Boolean expression will be false because 6 is not less than or equal to 5. See table 1; it shows the value for the counter variable for each loop iteration. As the table shows, when the counter reaches 6, the for loop will stop because the Boolean expression would no longer be true.

Table 1 for loop execution
Iteration Counter value Is counter <= 5?
First 1 Yes
Second 2 Yes
Third 3 Yes
Fourth 4 Yes
Fifth 5 Yes
Sixth 6 No

In the previous example we incremented the for loop by 1 but we are not limited to incremented by just 1. We can specify other update expressions, as shown in the following for loops:

for (i = 5; i >=1; i--) { document.write (i + " ");} // prints 5 4 3 2 1
for (i = 2; i <= 64; i *= 2) { document.write (i + " ");} // prints 2 4 8 16 32 64
for (i = 1000; i > 10; i /= 5) { document.write (i + " ");} // prints 1000 200 40

In the first for loop, we initialize the variable i to 5 and decrement i by 1, as long as i is greater than or equal to 1. In the second for loop, we use the multiplication operator to update the variable i. Note we could we have rewritten the update expression as i = i * 2 to double the value of i each time for loop is executed while the value of i is less than or equal to 64. In the third loop, we use the division operator in the update expression to divide i by 5, as long as i remains greater than 10.