Looping Statements in JavaScript

Introduction 

 
In the previous chapter, we learned about Conditional Statements in JavaScript and how to use these statements with example programs.
 
In this chapter, we learn about looping and jump control statements. Loops can execute blocks of code for any number of times.
 
The following Looping statements are supported in JavaScript:
  • For Loop
  • While Loop
  • Do while Loop

For Loop Statement

 
For a loop, when you execute a loop for a fixed number of times, the loop does three specified tasks (Statement 1, Statement 2, Statement 3). The following code shows the general Syntax of the 'for' statement.
 
Syntax 
  1. for (initialization; condition; increment/ decrement)  
  2. {  
  3.    Executed these statements;  
  4. }  
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>For Loop Statement in JavaScript</title>  
  5. </head>  
  6. <body>  
  7.     <h2>For loop Statement in JavaScript</h2>  
  8.     <script type="text/javascript">  
  9.         var i;  
  10.         for(i=0;i<=10;i++)  
  11.         {  
  12.             document.write("The number is :" +i +"<br/>");  
  13.         }  
  14. </script>  
  15. </body>  
  16. </html>  
Output
 
 

While Loop Statement

 
The while statement is the simplest of all looping statements. The while loop repeats a block of code, as long as a specified condition is true. In the for loop, we have seen the three specific tasks performed. It is specified at the same place in the Statement, and the same three specific tasks are performed in the while loop also, but the while loop conditions and initialization are occurring in different places. The following code show general Syntax of the While statement:
 
Syntax
  1. while (condition)  
  2. {  
  3.     Execute these statements; //true  
  4.     Increment/decrement;  
  5. }  
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>While Loop Statement in JavaScript</title>  
  5. </head>  
  6. <body>  
  7.     <h2>While loop Statement in JavaScript</h2>  
  8.     <script type="text/javascript">  
  9.         var i=0;  
  10.         while(i<=10)  
  11.         {  
  12.             document.write("The number is :" +i +"<br/>");  
  13.             i++;  
  14.         }  
  15. </script>  
  16. </body>  
  17. </html>  
Output
 
 

do-while Statement

 
The do-while statement is similar to the while statement. In the do-while statement, the condition is present at the outside of the statement. It will execute at least once even if the condition is to be not satisfied. If the condition is true, it will continue executing and once the condition becomes false, it stops the code execution. The following code shows general Syntax of the While statement:
 
Syntax
  1. do   
  2. {  
  3.    Execute the statements;  
  4.    Increment/decrements;  
  5. }  
  6. while (condition) //true  
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Do While Loop Statement in JavaScript</title>  
  5. </head>  
  6. <body>  
  7.     <h2>Do While loop Statement in JavaScript</h2>  
  8.     <script type="text/javascript">  
  9.         var i=0;  
  10.         do  
  11.         {  
  12.             document.write("The number is :" +i +"<br/>");  
  13.             i++;  
  14.         }  
  15.         while(i<=10)  
  16. </script>  
  17. </body>  
  18. </html>  
Output
 
 

Summary

 
In this chapter, we learned about looping statements in JavaScript and how to use these statements in JavaScript with example programs.
Author
Vijayakumar S
Vijayakumar S
404 3.9k 2m