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
 }

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.

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>

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 JavaScript 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 in JavaScript For Loop

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>

JavaScript Nested For Loop
9*1=: 9
9*2=: 18
9*3=: 27
9*4=: 36
9*5=: 45
9*6=: 54
9*7=: 63
9*8=: 72
9*9=: 81
9*10=: 90
10*1=: 10
10*2=: 20
10*3=: 30
10*4=: 40
10*5=: 50
10*6=: 60
10*7=: 70
10*8=: 80
10*9=: 90
10*10=: 100

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. 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.