ECMAScript Loop Statements

ECMAScript Basics - Part 8

Forward: In this part of the series, we look at loop statements in ECMAScript.

By: Chrysanthus Date Published: 25 Jul 2012

Introduction

A loop is a set of statements that executes repeatedly until a specified condition is met. In ECMAScript, you have the do-while loop, the while loop and the for loop. We shall see what all these mean in this article. A loop itself is a statement that has other statements inside.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

The do while Loop
Try the following code first (keep clicking the OK button of the alert box until it stops being displayed):

<script type="text/ECMAScript">

    n = 0;

    do
        {
            alert(n);
            ++n;
        } while (n<5)

</script>

Let us look at what is in the code. Zero is assigned to a variable, n. Then you have the do-while loop statement. The first thing in the statement is, do. This is an instruction to the ECMAScript Interpreter to execute what is inside the curly braces.

The interpreter executes statements in a program from top to bottom. The first statement to execute is the declaration and assignment of the variable, n. The next statement is the do-while loop statement. So, as soon as the interpreter sees, do, it executes all the statements in the curly braces. There are two statements in the block. The first one displays the value of n. The second one increments, n.

Now, after the second curly brace, you have the word, while. do and while are reserved words. They are instructions to the ECMAScript interpreter. After the word, while, you have a condition. So, do instructs the interpreter to execute the statements in the curly braces. Immediately after that the interpreter sees while. while evaluates the condition to see if the condition results in true. If it results in true (returns true), then the statements in the curly braces are executed again. The while condition is checked again; if it is true the block is executed again. This cycle repeats until the condition is false.

For the case above the start value for n is zero. When the block is executed, zero is displayed and then the value of n is increased to 1, from zero. As n is 1, the while condition becomes, “while (1 < 5)”. This evaluates to true. So the block is executed again. This time, the value of n is 1, the first statement in the block displays 1. The second statement increments the value of n to 2. The while condition becomes,  “while (2 < 5)”, which is true. So the cycle repeats. The cycle keeps repeating and n is incrementing. This continues until the while condition is, “while (5 < 5)”. Now this evaluates to false, and so the block is not re-executed again.

The highest value of n displayed is 4, but n arrives at a value of 5, since in the block, it is displayed before being incremented.

The syntax for the do-while statement is:

do
    {
        statements
    } while (condition)

The while Loop Statement
The syntax for the while loop statement is

while (condition)
    {
        statements
    }

The while loop statement is almost the same as the do-while loop statement with the following difference: There is no do instruction for the while loop. With the while loop, if at the start, the condition evaluates to false, the block is never executed. For the do-while loop, the block is evaluated at least once (the first time).

The for Loop
In the first code of this part of the series, there are two main statements. The declaration and assignment statement and the do-while loop statement. These two statements can be combined, in another loop called the for loop. This is the whole code in the for loop:

<script type="text/ECMAScript">

    for (n=0; n<5; ++n)
        {
            alert(n);
        }

</script>

All we have in this code is the for loop. The for loop begins with the reserved word, for, followed by parentheses, then the block to be executed. In the parentheses there are three expressions (statements), separated by semicolons.

In the parentheses, the first expression is the declaration and initialization of the variable, n. The next expression in the parentheses is the while condition we had. What pushed the do-while loop to be repeating was the incrementing of n, that is, ++n. In the parentheses of the for loop, this is the third expression. There were two statements in the block of the do-while loop. One of the statements is now in the parentheses of the for loop. The other one goes into the block of the for loop.

Try the above code.

The syntax for the for loop is given below. The explanation is given after.

for ([initialExpression]; [condition]; [incrementExpression]) {
   statements
}

When a for loop executes, the following occurs:

- The initializing expression initial-expression, if any, is executed. This expression usually initializes (assigns a value to a variable) one or more loop counters. This expression can also declare variables.
- The condition expression is evaluated. If the value of condition is true, the loop statements will execute. If the value of the condition is false, the for loop ends. If the expression for the condition is omitted, the condition is assumed to be true.
- The block statements execute.
- The increment (or update) expression, if there is one, executes, and control returns to Step 2.

The break Statement
The “break;” statement can be used to terminate a loop before its determined end. Try the following code and note that the loop ends after n is 2.

<script type="text/ECMAScript">

    for (n=0; n<5; ++n)
        {
            alert(n);
            if (n == 2)
                {
                    break;
                }
        }

</script>

Each time in the loop, the if-condition is checked for the value of true. When n is 2, the if-condition will return true; making the if-block to execute. In the if-block, you have just one statement, the break statement. It is just one word, break. Always end the break statement and other statements with a semicolon. The break statement stops the loop from repeating. In this case it stopped the loop when the internal if-condition occurred (was true).

The continue Statement
You can cause an iteration to be skipped as the loop is repeating. You use the continue statement for this. It is just one word, continue. Always end it with a semicolon. The following code illustrates this, when n is 2. The iteration for n equal 2 is skipped.

<script type="text/ECMAScript">

    for (n=0; n<5; ++n)
        {
            if (n == 2)
                {
                    continue;
                }
            alert(n);
        }

</script>

In order to skip the iteration of the block, you put the continue statement and its condition at the beginning of the block.

This is what the ECMAScript specification says about the continue statement:

- In a while loop, it jumps back to the condition.
- In a for loop, it jumps to the update (increment) expression.

We have come to the end of this part of the series, we continue in the next part.

Chrys

Broad Network

ECMAScript Loop Statements

ECMAScript Basics - Part 8

Introduction

Related Links

Comments