The JavaScript For Loop is used to repeat a block of statements for given number of times, until the given condition is False. 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 for loop there are three expressions separated by the semi-colons (;) and the execution of these expressions are as follows:
- Initialization: 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 is 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 For loop will be terminated.
- Increment and decrement operator: This expression is 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
The execution process of the 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 then it will execute the statements inside the for loop. If the condition is False then it will exit from the loop
- After completing the iteration it will execute 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 be executed.
JavaScript For Loop Example
This 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
ANALYSIS
- First, We declared number variable and assigned value 10 and total variable is initialized to 0.
- Next, We are going to check whether the counter variable (i) is less than or equal to number.
- 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.
- 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
For loop 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 the counter variable can be skipped as shown below:
int i=1; for( ;i<=10;i++)
Here the counter variable is declared before the for loop.
Like initialization, we can also skip the increment part.
int i=1;
for( ;i<=20; )
{
//statements
i++;
}The incrementing part is declared inside the for loop body.
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, 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.
JAVASCRIPT CODE
<!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 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 for loop j is initialized to value 1 and then 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 is 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. For loop is terminated, No need to check the second loop
Thank You for Visiting Our Blog
