HtmlCssMonk

Loops in JavaScript | Learn Basic JavaScript

code, html, internet

DESCRIPTION

While writing a program, you may encounter a situation where you need to perform an action over and over again. In such situations, you would need to write loop statements to reduce the number of lines.

Loops can execute a block of code as long as a specified condition is true.

The JavaScript loops are used to iterate the piece of code using for, while, do while or for-in loops. It makes the code compact. It is mostly used in array.

There are four types of loops in JavaScript

  1. while loop
  2. do-while loop
  3. for loop
  4. for-in loop

Let’s study about these loops one by one.

While Loop

The purpose of a while loop is to execute a statement or code block repeatedly as long as an expression is true. Once the expression becomes false, the loop terminates.

Flowchart –

Syntax –

while (condition)  
{  
    code to be executed  
}  

Example –

<html>
   <body>
      
      <script>
        var i = 11;
        while (i <= 15) {
          document.write(i + "<br/>");
          i++;
        }  
      </script>
      
   </body>
</html>

This Code will produce the following result on your webpage –


Do-while Loop

The do…while loop is similar to the while loop except that the condition check happens at the end of the loop. This means that the loop will always be executed at least once, even if the condition is false.

Flowchart –

Syntax –

do{  
    code to be executed  
}while (condition);  

Example –

<html>

<body>
  <script>
    var i = 21;
    do {
      document.write(i + "<br/>");
      i++;
    } while (i <= 25);  
  </script>
</body>

</html>

This Code will produce the following result on your webpage –


For Loop

The ‘for‘ loop is the most compact form of looping. It includes the following three important parts −

  • The loop initialization where we initialize our counter to a starting value. The initialization statement is executed before the loop begins.
  • The test statement which will test if a given condition is true or not. If the condition is true, then the code given inside the loop will be executed, otherwise the control will come out of the loop.
  • The iteration statement where you can increase or decrease your counter.

Flowchart –

Syntax –

for (initialization; test condition; iteration)  
{  
    code to be executed  
}  

Example –

<html>

<body>
   <script>
      for (i = 1; i <= 5; i++) {
      document.write(i + "<br/>")
     }  
   </script>
</body>

</html>

This Code will produce the following result on your webpage –


For-in Loop

The for…in loop is used to loop through an object’s properties. As we are just going through basics of JavaScript , you may not feel comfortable with this loop. But once you understand how objects behave in JavaScript, you will find this loop very useful.


Next topic – Functions in JS

Previous topic – Switch statement in JS


Leave a Comment

Your email address will not be published. Required fields are marked *