Looping or control Statement

The if statement can be thought of as a junction in program execution. Depending on the result of the test performed on the data, the program may go down one route oranother with its execution of statements.

There are many occasions, though, when we might want to execute some operation a number of times before continuing with the rest of our program. If the number of repeats is fixed, we could perhaps achieve this with multiple if statements and incrementing counter variables, though the code would be messy and hard to read. But what if we don’t know how many times we need to repeat our piece of code, because the number of repeats depends upon, for example, the changing value of a variable?

JavaScript has various built-in loop structures that allow us to achieve such goals.

while

while(this condition is true) {
carry out these statements ...
}                        
                        

The while statement works just like if, too. The only difference is that, after completing the conditional statements, while goes back and tests the condition again. All the time the condition keeps coming up true, while keeps right on executing the conditional code. Here’s an example:

var count = 10;
var sum = 0;
while(count > 0) {
sum = sum + count;
count--;
} alert(sum);                        
                        

Each time while evaluates the condition as true, the statements in the curly braces are executed over and over, adding the current value of count to the variable sum on each trip around the loop.

When count has been decremented to zero, the condition fails and the loop stops; program operation then continues from after the closing brace. By this time, the variable sum has a value of

do ...while

The do ... while structure is similar in operation to while, but with one important difference. Here’s the syntax:

do {
... these statements ...
} while(this condition is true)                        
                        

The only real difference here is that, since the while clause appears after the braces, the list of conditional statements is executed once before the while clause is evaluated. The statements in a do ... while clause will therefore always be executed at least once.

for..

The for loop is another loop similar in operation to while, but with a more comprehensive syntax. With the for loop, we can specify an initial condition, a test condition (to end the loop), and a means of changing a counter variable for each pass through the loop, all in one statement. Have a look at the syntax:

for(x=0; x<10; x++) {
... execute these statements ...
}                        
                        

We interpret this as follows:

“For x initially set to zero, and while x is less than 10, and incrementing x by 1 on each pass through the loop, carry out the conditional statements.”

Let’s rewrite the example we gave when looking at the while loop, but this time using a for loop:

var sum = 0;
for(count = 10; count > 0; count--) {
sum = sum + count;
}                        
                        

If the counter variable has not previously been declared, it is often convenient to declare it with the var keyword within the for statement instead of outside:

var sum = 0;
for(var count = 10; count > 0; count--) {
sum = sum + count;
} alert(sum);                        
                        

As in the previous example, after the loop terminates the variable sum has a value of

Leaving a Loop with break

The break command works within a loop pretty much as it does in a switch statement—it kicks us out of the loop and returns operation to the line of code immediately after the closing brace.

Here’s an example:

var count = 10;
var sum = 0;
while(count > 0) {
sum = sum + count;
if(sum > 42) break;
count--;
} alert(sum);                        
                        

We saw previously that, without the break instruction, the value of sum evolved like this:

Now, we find that when the value of sum reaches

the conditional clause of the if(sum > 42) statement will come up true, and cause the loop to terminate due to the break command.

<!DOCTYPE html>
<html>
<head>
<title>Loops and Control</title>
</head>
<body>
<script>
var days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
var message = "";
for (i in days) {
message += 'Day ' + i + ' is ' + days[i] + '\n';
}
alert(message);
</script>
</body>
</html>                        
                        
                        

In this sort of loop, we don’t need to worry about maintaining a loop counter or devising a test to see when the loop should complete. The loop will occur once for every property of the supplied object (in our example, once for every array item) and then terminate.