Easy Tutorial
❮ Met Win Blur Prop Video Currenttime ❯

JavaScript for Statement

JavaScript Statement Reference Manual

Example

Loop a code block 5 times:

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

text output result:

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4

More examples are included at the bottom of this article.


Definition and Usage

The for statement continues to execute as long as the condition evaluates to true.

The loop will keep executing as long as the condition is true, until the condition becomes false.

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

JavaScript supports different types of loops:

Tip: Use the break statement to break out of a loop, and the continue statement to skip the current iteration and proceed to the next one.


Browser Support

Statement Chrome Edge Firefox Safari Opera
for Yes Yes Yes Yes Yes

Syntax

Parameter Values

Parameter Description
statement1 Optional. Executed before the loop starts. Used for initializing variables, multiple initializations can be done using a comma (,). <br> <br> Note: This parameter can be omitted. However, do not omit the semicolon ";".
statement2 Optional. Defines the condition for executing the loop. <br> Usually used for condition checking. If the condition is true, the loop continues; if false, the loop stops. <br> <br> Note: This parameter can be omitted. However, do not omit the semicolon ";". If omitted, you must provide a condition to break the loop within the loop body. Otherwise, the loop will run indefinitely, causing the browser to crash.
statement3 Optional. Executed after each iteration of the loop. Usually used for incrementing or decrementing the counter variable. <br> <br> Note: This parameter can be omitted (e.g., increment or decrement operations can be done inside the loop).

Technical Details

| JavaScript Version: | 1.0 | | --- | --- |


More Examples

Example

Print car names by looping through the array indices:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
    text += cars[i] + "<br>";
}

Explanation of the above example:

Example

Initialize multiple values in the first parameter:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
    text += cars[i] + "<br>";
}

Example

Omit the first parameter (set values before the loop):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
    text += cars[i] + "<br>";
}

Example

Use the continue statement - loop through the code block but skip the iteration where i equals "3":

var text = "";
var i;
for (i = 0; i < 5; i++) {
    if (i == 3) {
        continue;
    }
    text += "The number is " + i + "<br>";
}

Example

Use the break statement - loop through the code block but exit the loop when the variable i equals "3":

var text = "";
var i;
for (i = 0; i < 5; i++) {
    if (i == 3) {
        break;
    }
    text += "The number is " + i + "<br>";
}

Example:

Omit the second parameter. In this example, we also use the break statement to exit the loop when i equals "3" (if the second parameter is omitted, you must set a condition within the loop body to break the loop. Otherwise, the loop will run indefinitely, causing the browser to crash):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; ; i++) {
    if (i == 3) {
        break;
    }
    text += cars[i] + "<br>";
}

Example

Loop through the array indices in descending order:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = cars.length - 1; i >= 0; i--) {
    text += cars[i] + "<br>";
}

Example

Omit the last parameter, increment the value inside the loop body:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var len = cars.length;
for (; i < len;) {
    text += cars[i] + "<br>";
    i++;
}

Example

Loop through a NodeList object and change the background color of all <p> elements:

var myNodelist = document.getElementsByTagName("P");
var i;
for (i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.backgroundColor = "red";
}

Example

Nested loop example:

var text = "";
var i, j;
for (i = 0; i < 3; i++) {
    text += "<br>" + "i = " + i + ", j = ";
    for (j = 10; j < 15; j++) {
        document.getElementById("demo").innerHTML = text += j + " ";
    }
}

Related Pages

JavaScript Tutorial: JavaScript For Loop

JavaScript Reference Manual: JavaScript for...in Statement

JavaScript Reference Manual: JavaScript break Statement

JavaScript Reference Manual: JavaScript continue Statement

JavaScript Reference Manual: JavaScript while Statement


❮ Met Win Blur Prop Video Currenttime ❯