JavaScript For loop


Loops can execute a block of code a number of times.

Loops are handy, if you want to run the same code over and over again, each time with a different value.

Often this is the case when working with arrays:

Instead of writing:


                      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:


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

Different Kinds of Loops

JavaScript supports different kinds of loops:

  • for - loops through a block of code a number of times
  • for/in - loops through the properties of an object
  • while - loops through a block of code while a specified condition is true
  • do/while - also loops through a block of code while a specified condition is true

The For Loop

The for loop has the following syntax:


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

Statement 1 is executed (one time) before the execution of the code block.

Statement 2 defines the condition for executing the code block.

Statement 3 is executed (every time) after the code block has been executed.


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

Full example with rendered value


                      <p id="example-1"></p>
      
                      <script>
                        var text = "";
                        var i;
                        for (i = 0; i < 5; i++) {
                            text += "The number is " + i + "<br>";
                        }
                        document.getElementById("example-1").innerHTML = text;
                    </script>
                

Live preview

From the example above, you can read:

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

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

Statement 3 increases a value (i++) each time the code block in the loop has been executed.


Statement 1

Normally you will use statement 1 to initialize the variable used in the loop (i = 0).

This is not always the case, JavaScript doesn't care. Statement 1 is optional.

You can initiate many values in statement 1 (separated by comma):


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

And you can omit statement 1 (like when your values are set before the loop starts):


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

However, at the beginning it will be best if you write loops with standard syntax:

for (statement 1; statement 2; statement 3) {


Statement 2

Often statement 2 is used to evaluate the condition of the initial variable.

This is not always the case, JavaScript doesn't care. Statement 2 is also optional.

If statement 2 returns true, the loop will start over again, if it returns false, the loop will end.

Warning: If you omit statement 2, you must provide a break inside the loop. Otherwise the loop will never end. This will crash your browser. Read about breaks in a later chapter of this tutorial.

The same as above - at the beginning it will be best if you write loops with standard syntax:

for (statement 1; statement 2; statement 3) {


Statement 3

Often statement 3 increments the value of the initial variable.

But statement 3 can do anything - like negative increment (i--), positive increment (i = i + 15), or anything else.


Exercises - test your knowledge

Exercise 1

Create a loop that runs from 0 to 9 and write a result in the console.


                        for (i = 0; i < 10; i++) {
                          console.log(i);
                        }
                
Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.