Loops

A loop will execute a block of code over and over until you tell it to stop. It can iterate through data or HTML.

In JavaScript, there are four types of loops:

1. for loops
2. for-in loops
3. while loops
4. do-while loops

You can interrupt and control the a loops with break, continue and with statements.

The for loop is often the tool you will use when you want to create a loop. The for structure keeps repeating a sequence of statements for as long as condition that you specify is true.

for(<counter = start>; <test counter>; <increment>);{
	<sequence of statments>;
}

This example assigns a value to each element of an array and displays these values.

var arr = new Array(4);
for (i = 0; i < 4; i++) {
    arr[i] = Math.random();
    document.write(arr[i] + "
");
}

The for...in statement loops through the properties of an object or all the elements of an array that you pass as an argument.

for ( < variable > in object | array) { <
    sequence of statements > ;
}

<variable> - holds either all the members of an object or all the elements of an array.

This example also assigns a value to each element of an array and displays these values.

var arr = new Array(4);
var element;

//Filling the array
for (i=0; i; i++){
arr[i] = Math.random();
}

//Iterating the array contents
for(element in arr)
{
document.write(arr[element] + " ");
}

while loops are the simplest type of loop. The while statement is followed by a condition in parentheses and a code block in curly brackets. As long as the condition evaluates to true, the code block is executed over and over again.

while ( < condition > ) { 
    < sequence of statements > ;
}

They look like this:

var i = 0;
while (i < 10) {
    i++;
    document.write("
" + i);
}

do-while loops are a slight variation of the while loops. The do...while structure keeps repeating a sequence of statements for as long as a condition that you specify is true. Unlike the while structure, the do..while structure tests the condition after it runs the sequence of statements.

Since the do statement is followed by a code block and a condition after the block, the code block will always be executed, at least once, before the condition is evaluated.

do { 
    < sequence of statements > ;
}
while ( < condition > )

The example runs the loop until it perceives that i is equal to 10.

var i = 0;
do {
    i++;
} while (i != 10)

The with statement allows you to specify a default object for a sequence of statements. This statement is very useful when your sequence of statements makes several calls to the same object several times. This approach makes your code code more elegant and more readable.

with(<object>) {
	<sequence of statements>
}

Example - without using with

x = Math.tan(6 * Math.E)+Math.sin(Math.LN10)
y = Math.cos(8 * Math.PI)

Example - using with

with(Math){
	x = Math.tan(6 * E)+Math.sin(Math.LN10)
	y = Math.cos(8 * PI)
}

The break and the continue statements allow you to come out of a loop iteration if a condition that you have specified is met.

The break statement allows you to interrupt the execution of a block of statements ({..}), when a boolean condition is true and to the first statement that appears after the end of the block.

If your program is made up of nested statement blocks then you can use the break statement in order to leave the current block and to continue processing in the block hat is on next level up.

Example

var i = 0;
while (true) {
    if (i == 10) break;
    document.write("<br> This would have been an endless loop! " + i);
    i++;
}

As soon as i is equal to 10, this program will come out of the loop.

You can also use the break statement in order to leave a specific block of statements. You must indicate the block of statements concerned using a label. You must place the label immediately before the start of the block that you want to leave.

Example

var i, j;
Loop1;
for ((i = 0; i < 3; i++) {
        document.write("Loop 1: i=" + i + ", j =" + j + "
");
        for (j = 0; j < 3; j++) {
            document.write("Loop 1: i=" + i + ", j =" + j + "
");
            if ((i + j) == 3) break Loop1;
        }
    }

As soon as i+j is equal to 3, then the break-label statement will cause the program to leave the block that is indicated by the label(it will leave on the first for loop in this case) and to continue processing immediately after this block.

The break and the continue statements allow you to come out of a loop iteration if a condition that you have specified is met.

The continue statement allows you to skip the remaining statements in the current loop and to continue processing at the start of the next iteration of the current loop.

for (i = 0; i < 5; i++) {
    if (i == 3) continue;
    document.write("Value of i: " + i + "
);
    }

This loop does not run the statement that it contains for i=2.

You can also use the continue statement in order to continue with the next iteration of a specific block of statements. You must indicate the block of statements concerned using a label. You must place the label immediately before the start of the block concerned.

var i, j;
Loop1;
for (i = 0; i < 3; i++) {
    document.write("Loop 1: i=" + i + ", j =" + j + "
");
    for (j = 0; j < 3; j++) {
        document.write("Loop 1: i=" + i + ", j =" + j + "
");
        if ((i + j) == 3) continue Loop1;
    }
}

As soon as i+j is equal to 3 the continue label statement will cause the program to continue processing at the start of the next iteration of the block that is indicated by the label. (in this case it will continue at the next iteration of the first for loop.