JavaScript for statement

Definition and usage

The for statement creates a loop that executes as long as the condition is true.

The loop will continue to run as long as the condition is true. It will stop only when the condition becomes false.

JavaScript supports different types of loops:

  • for - Code block that loops multiple times
  • for/in - Traverse object properties
  • for/of - Loop through the values of an iterable object
  • while - Loop the code block when the specified condition is true
  • do/while - Execute one code block, then repeat the loop when the specified condition is true

Tip:Use the break statement to exit the loop, and use the continue statement to skip a value in the loop.

Example

Loop the code block five times:

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

Try It Yourself

More TIY examples are at the bottom of the page.

Syntax

for (statement 1; statement 2; statement 3) {
  code block to be executed

Parameter value

Parameter Description
statement1

Optional. Execute before the loop (code block) starts. Usually this statement is used to initialize the counter variable. To initialize multiple values, separate each value with a comma.

Comment:This parameter can be omitted. However, do not omit the semicolon ";"
statement2

Optional. Define the condition for running the loop (code block). Usually this statement is used to evaluate the condition of the counter variable. If it returns true, the loop will restart, and if it returns false, the loop will end.

Comment:This parameter can be omitted. However, do not omit the semicolon ";". In addition, if this parameter is omitted, you must provide break within the loop. Otherwise, the loop will never end, which will cause your browser to crash.
statement3

Optional. Execute after each loop (code block) execution. Usually this statement is used to increment or decrement a counter variable.

Comment:This parameter can be omitted (for example, increase/decrease the value within the loop).

Technical details

JavaScript version: ECMAScript 1

More examples

Example

The loop traverses the array indices and collects car names from the cars array:

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

Try It Yourself

Example explanation:

  • First, we set a variable before the loop starts (var i = 0;)
  • Then, we define the condition for the loop to run. As long as the variable is less than the length of the array (i.e., 4), the loop will continue
  • The variable is incremented by one (i++) each time the loop is executed
  • Once the variable is no longer less than 4 (the length of the array), the condition is 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>";

Try It Yourself

Example

Omit the first parameter (set the value before the loop starts):

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

Try It Yourself

Example

Using the continue statement - inside the loop block, but skip the value "3":

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

Try It Yourself

Example

Use the break statement - execute a block of code, 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>";

Try It Yourself

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 provide a break within the loop. Otherwise, the loop will never end, and your browser will crash):

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

Try It Yourself

Example

Loop through the array indices in descending order (negative increment):

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

Try It Yourself

Example

Omit the last parameter and increment the value within the loop:

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

Try It Yourself

Example

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

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

Try It Yourself

Example

Example of nested loops (loop within a loop):

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

Try It Yourself

Browser Support

Syntax Chrome IE Firefox Safari Opera
for Supported Supported Supported Supported Supported

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