JavaScript for Loop

Loops can execute a block of code a specified number of times.

JavaScript Loops

If you want to run the same code over and over again, each time with a different value, using a loop is convenient.

We can output the values of an array like this:

General Approach:

document.write(cars[0] + "<br>"); 
document.write(cars[1] + "<br>"); 
document.write(cars[2] + "<br>"); 
document.write(cars[3] + "<br>"); 
document.write(cars[4] + "<br>"); 
document.write(cars[5] + "<br>");

Using a for Loop

for (var i=0; i<cars.length; i++)
{ 
    document.write(cars[i] + "<br>");
}

Different Types of Loops

JavaScript supports different types of loops:

• for - loops through a block of code a number of times
• for/in - loops through the properties of an object
• while - loops through a block of code while a specified condition is true
• do/while - also loops through a block of code while a specified condition is true

For Loop

The for loop is a tool you often use when you want to create a loop.

Here is the syntax of a for loop:

Statement 1 (Code Block) executes before the loop starts

Statement 2 defines the condition for running the loop (Code Block)

Statement 3 executes after the loop (Code Block) has been executed

Example

for (var i=0; i<5; i++)
{
    x = x + "The number is " + i + "<br>";
}

From the example above, you can see:

Statement 1 sets a variable before the loop starts (var i=0).

Statement 2 defines the condition for the loop to run (i must be less than 5).

Statement 3 increases a value (i++) each time the code block in the loop has been executed.

Statement 1

Usually, we use statement 1 to initialize the variables used in the loop (var i=0).

Statement 1 is optional, meaning it can be omitted.

You can initialize any (or multiple) values in statement 1:

Example:

for (var i=0, len=cars.length; i<len; i++)
{ 
    document.write(cars[i] + "<br>");
}

You can also omit statement 1 (e.g., if the values are set before the loop starts):

Example:

var i=2, len=cars.length;
for (; i<len; i++)
{ 
    document.write(cars[i] + "<br>");
}

Statement 2

Typically, statement 2 is used to evaluate the condition of the initial variable.

Statement 2 is also optional.

If statement 2 returns true, the loop will start again; if it returns false, the loop will end.

| | If you omit statement 2, you must provide a break within the loop. Otherwise, the loop will not stop, which could crash the browser. See the section on break in this tutorial for more information. | | --- | --- |

Statement 3

Usually, statement 3 increments the value of the initial variable.

Statement 3 is also optional.

Statement 3 can have various uses. The increment can be negative (i--), or larger (i=i+15).

Statement 3 can also be omitted (e.g., if the corresponding code is inside the loop):

Example:

var i=0, len=cars.length;
for (; i<len; )
{ 
    document.write(cars[i] + "<br>");
    i++;
}

For/In Loop

The JavaScript for/in statement loops through the properties of an object:

Example

var person = {fname:"Bill", lname:"Gates", age:56}; 

for (x in person)  // x is the property name
{
    txt = txt + person[x];
}

You will learn more about for/in loops in the JavaScript Objects chapter.

While Loop

We will cover the while loop and do/while loop in the next chapter.