JavaScript For Loop

❮ Previous Next ❯

Loops are a way to make a piece of code run several times.

JavaScript Loops

Loops are useful when you need to repeat the same piece of code multiple times, each time with a different value.

Often this is the case when working with arrays:

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
for/of - loops through the values of an iterable 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" statement sets up a loop and includes three optional expressions.

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

The code inside Expression 1 runs once before the code block executes.

Expression 2 sets the condition that determines when the code block should be executed.

After the code block finishes running, Expression 3 runs every time.

From the example above, you can read:

Before the loop begins, Expression 1 establishes a variable (let i = 0).

Expression 2 sets the rule for when the loop should keep going (when "i" is smaller than 5).

The third expression, Expression 3, increments a value (i++) every time the code block inside the loop is executed.

Expression 1

Typically, you use expression 1 to set up the starting value for the variable in the loop (e.g., let i = 0).

Not all situations are like this. JavaScript is indifferent. The first expression is not mandatory.

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

You can skip using expression 1 if your values are already defined before the loop begins.

Expression 2

Frequently, expression 2 checks the initial variable's condition.

It's not true all the time. JavaScript doesn't mind. Expression 2 is also not mandatory.

If the second condition is true, the loop restarts. If it's false, the loop stops.

If you leave out expression 2, remember to include a break within the loop. Without it, the loop will continue indefinitely, potentially causing your browser to crash. Learn more about breaks in a subsequent chapter of this tutorial.

Expression 3

Often "expression 3" increases the value of the starting variable.

Not always true. JavaScript doesn't mind. The third expression is not mandatory.

Expression 3 has the capability to perform various actions, such as reducing a value (i--), increasing a value positively (i = i + 15), or any other specified operation.

Expression 3 can also be omitted (like when you increment your values inside the loop):

Loop Scope

Using var in a loop:

Using let in a loop:

In the initial example, when using var, the variable declared within the loop gets declared again outside the loop.

In the second example, when we use let, the variable declared within the loop doesn't create a new declaration of the variable outside the loop.

When you use let to declare the variable 'i' in a loop, the 'i' variable is only accessible within that loop.

For/Of and For/In Loops

The for/in loop and the for/of loop will be discussed in the upcoming chapter.

While Loops

The next chapters will cover explanations of the while loop and the do/while loop.

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript For Loop</h2>
    <p id="demo"></p>
    <script>
      const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
      let text = "";
      for (let i = 0; i < cars.length; i++) {
        text += cars[i] + " <br> ";
      }
      document.getElementById("demo").innerHTML = text;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript For Loop</h2>
    <p id="demo"></p>
    <script>
      let text = "";
      for (let i = 0; i < 5; i++) {
        text += "The number is " + i + " <br> ";
      }
      document.getElementById("demo").innerHTML = text;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript For Loop</h2>
    <p id="demo"></p>
    <script>
      const cars = ["BMW", "Volvo", "Saab", "Ford"];
      let i, len, text;
      for (i = 0, len = cars.length, text = ""; i < len; i++) {
        text += cars[i] + " <br> ";
      }
      document.getElementById("demo").innerHTML = text;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript For Loop</h2>
    <p id="demo"></p>
    <script>
      const cars = ["BMW", "Volvo", "Saab", "Ford"];
      let i = 2;
      let len = cars.length;
      let text = "";
      for (; i < len; i++) {
        text += cars[i] + " <br> ";
      }
      document.getElementById("demo").innerHTML = text;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript For Loop</h2>
    <p id="demo"></p>
    <script>
      const cars = ["BMW", "Volvo", "Saab", "Ford"];
      let i = 0;
      let len = cars.length;
      let text = "";
      for (; i < len;) {
        text += cars[i] + " <br> ";
        i++;
      }
      document.getElementById("demo").innerHTML = text;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript let</h2>
    <p id="demo"></p>
    <script>
      var i = 5;
      for (var i = 0; i < 10; i++) {
        // some statements
      }
      document.getElementById("demo").innerHTML = i;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript let</h2>
    <p id="demo"></p>
    <script>
      let i = 5;
      for (let i = 0; i < 10; i++) {
        // some statements
      }
      document.getElementById("demo").innerHTML = i;
    </script>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics