Tutorial Gateway

JavaScript For Loop

by

The JavaScript For Loop is used to repeat a block of statements for given number of times, until the given condition is False.

JavaScript For loop is one of the most commonly used loop in any programming language. Let us see the syntax of the for loop in JavaScript Programming language:

JavaScript For Loop Syntax

The syntax of the JavaScript For Loop is as follows:

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, 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 tested against the test condition. If the condition is True then it will execute the statements inside the For loop. If the condition fails then JavaScript For loop will terminated.
  • Increment and decrement operator: This expression will executed after the end of each iteration. This operator helps to increase or decrease the counter variable as per our requirement. Please refer Increment and decrement operators in JavaScript article to understand the operator

Flow Chart of a JavaScript For Loop

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

FLOW CHART of a JavaScript For Loop

The execution process of the JavaScript for loop is:

  1. Initialization: We initialize the counter variable(s) here. For example i=1.
  2. Test condition: It will check for the condition against the counter variable. If the condition is True then it will execute the statements inside the for loop. If the condition is False then it will exit from the loop
  3. After completing the iteration it will execute the Increment and Decrement Operator inside the for loop to increment or decrement the value.
  4. 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 executed.

JavaScript For Loop Example

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

JAVASCRIPT CODE

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

JavaScript For Loop 1

ANALYSIS

  1. In this Js For Loop example, First, We declared number variable and assigned value 10 and total variable will initialize to 0.
  2. Next, We are going to check whether the counter variable (i) is less than or equal to number.
  3. If the condition results true then i is 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.
  4. 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 through compilation error.

Initialization of the counter variable can skipped as shown below:

int i=1;

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

Here, the counter variable was 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 was 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 allow to use multiple conditions in for loop. 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 logical operator to join conditions. Please refer JavaScript Logical Operator article to understand the operators functionality

Nested For Loop in JavaScript

In the example, we are going to nest one for loop inside another for loop, this is also called as 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:

JavaScript For Loop 2

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

In the first for loop, i is initialized to value 9 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 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 incremented to 2

9 * 2 = 9

it will repeat the process up to 10.

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

NOTE: It will only exit from 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 was terminated, No need to check the second loop