JavaScript For Loop


The loop can execute the code block a specified number of times.


JavaScript Loop

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

We can output the value of the array like this:

General writing:

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>");

Example - Use for Loop

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

Try It! 


Different Types of Loops

JavaScript supports different types of loops:

  • for - loop the code block a certain number of times

  • for/in - loop through the properties of an object

  • while - loop the specified code block when the specified condition is true

  • do/while - also loop the specified code block when the specified condition is true


For Loop

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

The following is the syntax of the for loop:

for (statement 1statement 2statement 3)
{
    executed code block
}

Statement 1: Executes before (code block) starts

Statement 2: Defines the conditions for running the loop (code block)

Statement 3: To be executed after the loop (code block) has been executed

Example

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

 Try It! 

From the above example, you can see:

Statement 1: Set the variable (var i=0) before the start of the loop.

Statement 2: Defines the conditions for loop operation (i must be less than 5).

Statement 3: Adds a value (i++) each time the code block has been executed.


Statement 1

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

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

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>");
}

 Try It! 

You also can omit statement 1 (for example, when the value is already set before the loop starts):

Example

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

 Try It! 


Statement 2

Usually 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.

lampIf you omit statement 2, then you must provide break inside the loop . Otherwise, the cycle cannot be stopped. This may crash the browser. Please read about break later in this tutorial.

Statement 3

Usually statement 3 will increase the value of the initial variable.

Statement 3 is also optional.

Statement 3 has multiple uses. The increment can be negative (i--) or greater (i=i+15).

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

Example

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

 Try It! 


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 attribute name
{
     txt=txt + person[x];
}

 Try It! 

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


while Loop

We will explain to you the while loop and do/while loop in the next chapter.