JavaScript for loop

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

Use for loops

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

Try it out . . .

Different types of loops

JavaScript supports different types of loops:

For - Loop code blocks a certain number of times
for/in - Loops through the properties of the object
While - A block of code that loops when the specified condition is true
do/while - also loops the block of code specified when the specified condition is true

For loop

For loops are tools that you often use when you want to create loops.

Here's the syntax for the loop:

for ( Statement 1 ; Statement 2 ; Statement 3 )
{
Code block
}

Statement 1 (block of code) starts before it begins.

Statement 2 defines the conditions under which a loop (block of code) is run

Statement 3 is executed after the loop (block of code) has been executed

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

Try it out . . .

From the example above, you can see:

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

Statement 2 defines the conditions under which the loop runs (i must be less than 5).

Statement 3 adds a value (i)) each time the block of code has been executed.

Statement 1

Typically, we use the variable used in the initialization loop in statement 1 (var i=0).

Statement 1 is optional, which means that statement 1 is not used.

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

Instance:

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

Try it out . . .

You can also omit statement 1 (for example, when a value has been set before the loop begins):

Instance:

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

Try it out . . .

Statement 2

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

Statement 2 is also optional.

If statement 2 returns true, the loop starts again, and if false is returned, the loop ends.

	If you omit statement 2, you must provide break within the loop. O therwise the cycle cannot stop. T his can cause the browser to crash. Read about break later in this tutorial.

Statement 3

Typically, statement 3 increases the value of the initial variable.

Statement 3 is also optional.

Statement 3 has several uses. The increment can be negative (i--), or larger (i-i-15).

Statement 3 can also be omitted (for example, when there is code inside the loop):

Instance:

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

Try it out . . .

For/In loop

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

var person={fname:"John",lname:"Doe",age:25};

for (x in person)
{
txt=txt + person[x];
}

Try it out . . .

Tip: In JavaScript, the for in loop can traverse not only the properties of the object, but also the array.

You'll learn more about the for/in loop in the section on JavaScript objects.

While loop

We'll show you the while loop and the do/while loop in the next chapter.

The relevant instance

Cycle iterations with for statements

You can execute code multiple times with a for-loop statement.

Reverse iteration using the for loop

The for loop can iterate in reverse, as long as we define the right conditions.

JavaScript for loop

Table of contents