Loops in JavaScript

https://programmingtutorial.in/

What are loops in JavaScript?

Whenever there is need to execute the same kind of statements to perform a particular task, the loops come into play. Loops are nothing but a programming facility to execute same block of code again and again until certain condition is met. The basic idea behind a loop is to automate the repetitive tasks within a program to save the time and effort. There are five types of loops which are supported by JavaScript.

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

while loop in JavaScript

The while loop is one of the simplest loops in JavaScript which executes the block of statements as long as the given condition evaluates as true. When the condition becomes false the loop is stopped and it jumps the control to the next statement coming after the looping block. The general syntax is given below:

while (true condition)
{
Statements to execute
}

https://programmingtutorial.in/
flowchart of while loop
var x = 1;
while(x <= 3) {    
    document.write("<p>The number is " + x + "</p>");
    x++;
}

In the above code, a variable x has been declared and initialised with an initial value 1. At first the condition is checked and will be executed again and again until the value of x becomes 3.

It will print output as:

The number is 1

The number is 2

The number is 3

do…while loop in JavaScript

The do…while loop is similar to while loop except, the execution of statements once before checking the condition which means the block of code has to be executed at least one time before entering condition. If the condition comes out as true value, then the block of code has to be executed once again and this process will go on until the condition becomes false. The syntax of do…while loop is given below.

do{

Code to be executed }

while(condition);

https://programmingtutorial.in/
flowchart of do…while loop
var x=1;
do
{
document.write("<p>The number is " + x + "</p>");
x++;
}
while(x<=3);

Now after going through above loops you will be able to find out the basic difference between while loop and do…while loop. If you see, the condition is checked at the beginning when we are using while loop and the condition is checked at the end when we use do…while loop. In other words we can figure out from above discussion, at least one block of code has to be executed when we are using do…while loop even if the condition is false.

for loop in JavaScript

The for loop in JavaScript is the most compact loop and has three parts inside it. The three parts are initialization, condition checking and statement iteration. This loop repeats the block of code as long as condition is true. It is generally used to execute a certain number statements. The syntax of for loop is given as below:

for(initialization; condition; increment)

{ Code to be executed }

initialization: It is used to intialize the counter variables and evaluated once before the condtion.

condition: This part checks whether the condition is true or false.

increment: This part increment the counter.

https://programmingtutorial.in/
flowchart of for loop
<html>
   <body>      
      <script type = "text/javascript">
         <!--
            var i;
            document.write("Starting Loop" + "<br />");
            for(i = 0; i < 10; i++) 
           {
               document.write("Current Count : " + i );
               document.write("<br />");
            }         
            document.write("Loop stopped!");
         //-->
      </script>      
   </body>
</html>

for…in loop

The for…in loop is a special type of loop in JavaScript that iterates over the properties of an object. The loop counter or variable declared in for…in loop is a string instead of a number. The general syntax of for…in loop is given below:

for(variablename in object)

{

statements or block to be executed

}

In this loop, one property of object is assigned to the variable name and the loop continues to process till the end is not reached. Let us write a simple code to show name and surname of a person.

<html>
   <body>      
      <script type = "text/javascript">
         var person = {"name": "Rajesh", "surname": "Kundal", "age": "36"};
         for(var prop in person) {  
         document.write("<p>" + prop + " = " + person[prop] + "</p>"); 
         }
      </script>      
   </body>
</html>

It will give output as name=Rajesh surname=Kundal age=36