JavaScript for Loop
Example
Loop (iterate over) a code block five times:
for (let i = 0; i < 5; i++) {
text += i + "<br>";
}
Try it Yourself »
Loop (iterate over) an array to collect car names:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
Try it Yourself »
- The loop starts in position 0 (
let i = 0). - The loop automatically increments
ifor each run. - The loop runs as long as
i < cars.length.
More examples below.
Definition and Usage
The for statement defines a code block that is executed as long as a condition is
true.
Note
If you omit statement 2, you must provide a break inside the loop.
Otherwise the loop will never end. This will crash your browser.See Also:
Syntax
for (statement 1; statement 2; statement 3) {
code block to be executed
}
Parameters
| Parameter | Description |
| statement 1 | Optional. Executed before the code block starts. Normally used to initialize a counter variable. To initiate multiple values, separate each value with a comma. This parameter can be omitted, but not the semicolon ";" |
| statement 2 | Optional. The condition for running the code block. If it returns true the loop will start over again, otherwise the loop will end.This parameter can be omitted, but not the semicolon ";" |
| statement 3 | Optional. Executed after the code block. Normally used to increment the counter variable. This parameter can be omitted (e.g. to increase/decrease values inside the loop) |
JavaScript Loop Statements
| Statement | Description | |
| break | Breaks out of a loop | |
| continue | Skips a value in a loop | |
| while | Loops a code block while a condition is true | |
| do...while | Loops a code block once, and then while a condition is true | |
| for | Loops a code block while a condition is true | |
| for...of | Loops the values of any iterable | |
| for...in | Loops the properties of an object |
More Examples
Initiate multiple values in the first parameter:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
Try it Yourself »
Omit the first parameters (set the values before the loop starts):
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
Try it Yourself »
Use continue - Loop through a block of code, but skip the value 3:
let text = "";
for (let i = 0; i < 5; i++) {
if (i == 3) continue;
text += i + "<br>";
}
Try it Yourself »
Use break - Loop a code block, but exit the loop when i == 3:
let text = "";
for (let i = 0; i < 5; i++) {
if (i == 3) break;
text += i + "<br>";
}
Try it Yourself »
Omit the second parameter.
Use break to exit the loop,
otherwise the loop will never end, and your browser will crash:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
for (let i = 0; ; i++) {
if (i == cars-length) break;
text += cars[i] + "<br>";
}
Try it Yourself »
Loop over an array in descending order (negative increment):
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
for (let i = cars.length - 1; i >= 0; i--) {
text += cars[i] + "<br>";
}
Try it Yourself »
Omit the last parameter, and increment the values inside the loop:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let len = cars.length;
for (; i < len;) {
text += cars[i] + "<br>";
i++;
}
Try it Yourself »
Loop a NodeList and change the color of all p elements in the list:
const myNodelist = document.getElementsByTagName("P");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "blue";
}
Try it Yourself »
A nested loop (a loop inside a loop):
let text = "";
for (let = 0; i < 3; i++) {
text += i + "<br>";
for (let j = 10; j < 15; j++) {
text += j + "<br>";
}
}
Try it Yourself »
Browser Support
for is an ECMAScript1 (ES1) feature.
ES1 (JavaScript 1997) is fully supported in all browsers:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |
