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:
- for - Loops through a block of code a number of times
- for...in - Loops through the properties of an object
- for...of - Loops through the values of an iterable object
- while - Loops through a block of code while a specified condition is true
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:
- First, we set the variable before the loop starts (var i = 0;)
- Then, we define the condition for the loop to run. The loop will continue to run as long as the variable is less than the length of the array (length is 4)
- Each time the loop executes, the variable is incremented by 1 (i++)
- If the variable is no longer less than 4 (the length of the array), the condition becomes false and the loop ends.
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