JavaScript For Loop

The JavaScript For Loop is used to repeat a block of statements for a given number of times until the given condition is False. JavaScript For loop is one of the most commonly used loops. Let us see the syntax of the for loop in JavaScript Programming language:

for (initialization; test condition; increment/decrement operator)
 {
    //Statement 1
    //Statement 2
     ………
    //Statement n
 }

If you observe the above syntax, In JavaScript for loop there are three expressions separated by the semi-colons (;) and the execution of these expressions are as follows:

Initialization: Javascript For loop starts with the initialization statement. So, the initialization of counters variables is done first (For example, counter =1 or i=1.). The initialization section is executed only once at the beginning of the for loop.
Test Condition: The value of the counter variable will test against the test condition. If the condition is True, it will execute the statements inside the For loop. If the condition fails, the JavaScript For loop will terminate.
Increment and decrement operator: This expression will execute after the end of each iteration. This Increment and decrement operator helps to increase or decrease the counter variable as per our requirement.

Flow Chart of a JavaScript For Loop

Below screenshot will show you the flow chart of the For Loop in JavaScript Programming language

The execution process of the JavaScript for loop is:

Initialization: We initialize the counter variable(s) here. For example, i=1.
Test condition: It will check for the condition against the counter variable. If the condition is True, execute the statements inside the JavaScript for loop. If the condition is False, exit from the loop
After completing the iteration, it executes the Increment and Decrement Operator inside the for loop to increment or decrement the value.
Again it will check for the condition after the value incremented. As long as the condition is True, the statements inside the for loop will execute.

JavaScript For Loop Example

This JavaScript For Loop program allows the user to enter any integer values. Then it will calculate the sum of natural numbers up to the user entered number.

<!DOCTYPE html>
<html>
<head>
    <title> JavaScript For Loop </title>
</head>

<body>
    <h1> JavaScript For Loop </h1>
<script>
    var i, number = 10, total = 0;
    for (i = 1; i <= number; i++)
    {
        total = total + i;
    }
    
    document.write("<b>Sum of N Natural Numbers is </b>= " + total);  
</script>
</body>
</html>

OUTPUT

ANALYSIS

In this Js For Loop example, First, We declared number variable and assigned value 10 and total variable will initialize to 0.
Next, We are going to check whether the counter variable (i) is less than or equal to a number.
If the condition results true, i added to the total. Otherwise, it will exit from the for loop. At the starting of the loop i =1 and n =10, so the condition will be True until i value is incremented to 11.
In the next section, we used ++ operator to increment the i value. After the incrementing process, it will repeat the process until the condition results False (until I =11).

JavaScript For Loop features

The For loop in JavaScript has the flexibility to omit one or more sections from the declaration. Although we can skip one or more sections from the for loop, we have to put the semicolon (;) in place; otherwise, it will throw compilation error.

Initialization of the counter variable can skip

int i=1;

for( ;i<=10;i++)

Here, the counter variable declared before the JavaScript for loop.

Like initialization, we can also skip the increment part.

int i=1;

for( ;i<=20; )
 {
   //statements     
   i++;
 }

The incrementing part declared inside the for loop body.

JavaScript For loop allows us to initialize more than one counter variable at a time with comma separate:

for(i=1,j=20; i<j; i++)

For loop also allows using multiple conditions. Instead of using comma we have to use the logical operator to separate the two condition

for(i=1,j=20; i<=10 && j>=20; i++)
 {
   //statements
   j++;
 }

Like the test condition, JavaScript for loop allows us to use more than one increment operator as follows

for(i=1,j=1; i<=10 && j<=10; i++, j++)

NOTE: For initialization, increment and decrement operator section, we can use comma to separate multiple declarations. To separate the test conditions, you must use a Logical Operator to join conditions

Nested For Loop in JavaScript

We are going to nest one for loop inside another for loop, also called nested for loop in JavaScript.

<!DOCTYPE html>
<html>
<head>
    <title> Nested For Loop in JavaScript </title>
</head>

<body>
    <h1> JavaScript Nested For Loop </h1>
<script>
    var i, j;
    for (i = 9; i <= 10; i++)
    {
        for (j = 1; j <= 10; j++)
        {
            document.write(i + "*" + j + "=: " + (i * j) + "<br \>"); 
        }
    }   
</script>
</body>
</html>

OUTPUT:

This program for JavaScript For Loop example prints multiplication table for 9 and 10.

In the first for loop, i is initialized to value nine, and then it will check whether i is less than or equal to 10. This condition is True until i reaches to 11. If this condition is True, then it will enter into second for loop. Otherwise, it will exit from the for loop.

In the second JavaScript for loop, j was initialized to value 1. Next, it will check whether i is less than or equal to 10. This condition is True until i reaches to 11.

Iteration 1: i = 9, and the condition is True. So entered the second loop. j =1 and j <=10 condition is True so statement inside the loop is printed

9 * 1 = 9

Now the value of j will increment to 2

9 * 2 = 9

it will repeat the process up to 10.

Now the value of j is 11, and the condition fails so that it will exit from the second loop.

NOTE: It will only exit from the inner loop (Second loop) but not from the entire loop.

Iteration 2: i = 10 and the condition is True so repeat the above process

Iteration 3: i = 11, and the condition is False. So, JavaScript For loop terminated, No need to check the second loop