WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

JavaScript For Loop


A loop can execute a block of code a specified number of times.


JavaScript loop

If you want to run the same code over and over, and the values are different each time, it is convenient to use loops.

We can output the values of the array like this:

Instead of 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>);

You can write:

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



Different types of loops

JavaScript supports different types of loops:

  • for -loop 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

The For Loop

for loops are a tool you often use when you want to create loops.

Here is the syntax of a for loop:

for (Statement 1; statement 2; statement 3) {
    Executed code block
}

Statement 1 (code block) execute before starting

Statement 2 Define conditions for running a loop (block of code)

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

Example

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

From the example above, you can see:

Statement 1 Set 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 Increments a value (i ++) after each block of code has been executed.


Statement 1

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

Statement 1 is optional, which means that it can be used without statement 1.

You can initialize any (or more) 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 (such as when a value was set before the loop started):

Example

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

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 starts again, and if it returns false, the loop ends.

lamp If you omit statement 2, you must provide break inside the loop. Otherwise the cycle cannot stop. This may cause the browser to crash. Please read about breaks later in this tutorial.



Sentence 3

Normally statement 3 increases the value of the initial variable.

Statement 3 is also optional.

Sentence 3 has many uses. The increment can be negative (i--) or larger (i = i + 15).

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

Example

var i = 0;
var len = cars.length;
for (; I < len; ) {
    document.write(cars[i] + "<br>";
    i++;
}
Try it Yourself »

The For/In Loop

JavaScript for /in statements loop through the properties of an object:

Example

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

for (x in person) // x is the property name {
    txt=txt + person[x];
}
Try it yourself »
You will learn more about for /in loops in the chapter on JavaScript objects.

The While Loop

We will explain while loops and do /while loops in the next chapter.