JavaScript For Loops

Loops can execute code blocks multiple times.

JavaScript Loop

If you need to run the code multiple times and use different values each time, then the loop (loop) is quite convenient to use.

We usually encounter examples using arrays:

Do not write it like this:

text += cars[0] + "<br>"; 
text += cars[1] + "<br>"; 
text += cars[2] + "<br>"; 
text += cars[3] + "<br>"; 
text += cars[4] + "<br>"; 
text += cars[5] + "<br>";

You can write like this:

for (i = 0; i < cars.length; i++) { 
    text += cars[i] + "<br>";
 }

Try It Yourself

Different types of loops

JavaScript supports different types of loops:

  • for - Multiple times traverse code block
  • for/in - Traverse object properties
  • while - Run a block of code when the specified condition is true
  • do/while - Run a block of code when the specified condition is true

For loop

The for loop is a tool frequently used when you want to create a loop.

The syntax of the for loop is as follows:

for (Statement 1; Statement 2; Statement 3) {
     The code block to be executed
}

Statement 1 is executed before the loop (code block) starts.

Statement 2 defines the condition for running the loop (code block).

Statement 3 will execute after each execution of the loop (code block).

Example

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

Try It Yourself

From the above code, you can understand that:

Statement 1 sets a variable before the loop starts (var i = 0).

Statement 2 defines the condition for running the loop (i must be less than 5).

Statement 3 will increment the value after each execution of the code block (i++).

Statement 1

Generally, you would use statement 1 to initialize the variables used in the loop (i = 0).

But it's not always the case, JavaScript doesn't care. Statement 1 is optional.

You can initialize multiple values in statement 1 (separated by commas):

Example

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

Try It Yourself

And you can also omit statement 1 (for example, setting the value before the loop starts):

Example

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

Try It Yourself

Statement 2

Generally, statement 2 is used to calculate the condition of the initial variable.

But it's not always the case, JavaScript doesn't care. Statement 2 is optional as well.

If statement 2 returns true, the loop will restart; if it returns false, the loop will end.

If statement 2 is omitted, you must provide a break. Otherwise, the loop will never end. Read more about break in the next chapter.

Statement 3

Generally, statement 3 will increment the initial variable's value.

But it's not always the case, JavaScript doesn't care. Statement 3 is optional as well.

Statement 3 can do anything, such as decrementing (i--), incrementing (i = i + 15), or any other action.

Statement 3 can also be omitted (for example, when you increment the value inside the loop):

Example

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

Try It Yourself

For/In Loop

JavaScript for/in The statement traverses the properties of the object:

Example

var person = {fname:"Bill", lname:"Gates", age:62}; 
var text = "";
var x;
for (x in person) {
    text += person[x];
}

Try It Yourself

While Loop

We will learn the while loop and do/while loop in the next chapter.

textbook

For more information on JavaScript for StatementFor more information on the knowledge, please read the relevant content in the Advanced JavaScript Tutorial:

ECMAScript Iteration Statements
Iteration statements, also known as loop statements. This section introduces the four iteration statements provided by ECMAScript.