JavaScript for Loop

Summary: in this tutorial, you will learn how to use the JavaScript for loop statement to create a loop with various options.

Introduction to the JavaScript for loop statement

The JavaScript for loop statement allows you to create a loop with three optional expressions. The following illustrates the syntax of the for loop statement:

for (initialization; condition; post-expression) {
    // statements
}
Code language: JavaScript (javascript)

1) initialization

The initialization expression initializes the loop. The initialization expression is executed only once when the loop starts. You typically use the initialization is to initialize a counter variable. If you use the var keyword to declare the counter variable, the variable will have either function or global scope. In other words, you can reference the counter variable after the loop ends. However, if you use the let keyword to declare the counter variable, the variable will have a blocked scope, which is only accessible inside the loop.

2) condition

The condition is an expression that is evaluated once before every iteration. The statement inside the loop is executed only when the condition evaluates to true. The loop is terminated if the condition evaluates to false. Note that the condition is optional. If you omit it, the for loop statement considers it as true.

3) post-expression

The for loop statement also evaluates the post-expression after each loop iteration. Generally, you use the post-expression to update the counter variable. The following flowchart illustrates the for loop: In the for loop, the three expressions are optional. The following shows how to use the for loop without any expressions:

for ( ; ; ) {
   // statements
}
Code language: JavaScript (javascript)

JavaScript for loop examples

Let’s take some examples of using the for loop.

1) Simple for loop examples

The following example uses the for loop statement that shows the numbers from 1 to 5 in the Console window.

for (var counter = 1; counter < 5; counter++) {
    console.log('Inside the loop:' + counter);
}
console.log('Outside the loop:' + counter);
Code language: JavaScript (javascript)

Output:

Inside the loop:1
Inside the loop:2
Inside the loop:3
Inside the loop:4
Outside the loop:5
Code language: CSS (css)

How it works.

• First, declare a variable  counter and initialize it to 1.
• Second, display the value of counter in the Console window if counter is less than 5.
• Third, increase the value of counter by one in each iteration of the loop.

Since the for loop uses the var keyword to declare counter, the scope of counter is global. Therefore, we can access the counter variable after the loop ends. From ES6, you can use the let keyword to declare the counter variable which is local to the loop:

for (let counter = 1; counter < 5; counter++) {
    console.log('Inside the loop:' + counter);
}
console.log('Outside the loop:' + counter);
Code language: JavaScript (javascript)

Error:

ReferenceError: counter is not defined
Code language: JavaScript (javascript)

Accessing the counter variable after the loop caused a ReferenceError .

2) The for loop without the initialization part example

The following example uses a for loop that omits the initialization part:

var j = 1;
for (; j < 10; j += 2) {
    console.log(j);
}
Code language: JavaScript (javascript)

Output:

1
3
5
7
9

3) The for loop without the condition example

Similar to the initialization expression, the condition expression is optional. If you omit the condition expression, you need to use a break statement to terminate the loop.

for (let j = 1;; j += 2) {
    console.log(j);
    if (j > 10) {
        break;
    }
}
Code language: JavaScript (javascript)

Output:

1
3
5
7
9
11

3) The for loop without any expression example

All three expressions of the for loop statements are optional therefore you can omit all of them. Again, you must use a break statement to terminate the loop and also modify the counter variable to make the condition for the break statement becomes true at some point.

// initialize j variable
let j = 1;
for (;;) {
    // terminate the loop if j is greater than 10;
    if (j > 10) break;
    console.log(j);
    // increase the counter j
    j += 2;
}
Code language: JavaScript (javascript)

Output:

1
3
5
7
9

4) The for loop without the loop body example

Interestingly enough, the for statement can have an empty statement. In this case, you place a semicolon ( ;) immediately after the for statement. The following example calculates the total of numbers from 1 to 10.

The expression is placed at the post-expression, therefore, it uses an empty statement in the loop body.

let sum = 0;
for (let i = 0; i <= 9; i++, sum += i);
console.log(sum);
Code language: JavaScript (javascript)

Output:

55

In this tutorial, you have learned how to use the JavaScript for loop statement to create a loop with various options.