Google News
logo
Javascript Loops
Loops are useful when you have to execute the same lines of code repeatedly, for a specific number of times or as long as a specific condition is true. Suppose you want to type a ‘Good Morning’ message 20 times in your webpage. Instead if you use loops, you can complete this task in just 3 or 4 lines only.

There are mainly four types of loops and two types of statements in JavaScript.

Loops :
1. for loop
2. while loop
3. do…while loop
4. for/in loop

Statements:
1. break statement
2. continue statement
for loop :
Syntax :

for(initializer; condition; increment)
{
lines of code to be executed
}   
The first is the initializer (var i = 1) which initializes the loop and is executed only once at the start. The second is a test condition (i <= 50). When a conditional expression evaluates to true, the body of the loop is executed. When false, the loop terminates. The third part is an updater (i++) which is invoked after each iteration.
Example :
<html>
<head>
<title>For Loop</title>
</head>
<body>
    
<script type="text/javascript">  
  for (i=1; i<=5; i++)  
  {  
  document.write(i + "<br/>")  
  }  
</script> 
 
</body>
</html>
Output :

1

2

3

4

5

while loop :
The while loop is execute a condition or code block repeatedly as long as an expression is true. Once the expression becomes false, the loop terminates.
Syntax :
 
while (condition)  
{  
    code to be executed  
}
Example :
<html>
<head>
<title>While Loop</title>
</head>
<body>

<script type="text/javascript"> 
 
  var i=5;  
  while (i<=10)  
  {  
  document.write(i + "<br/>");  
  i++;  
  }  

</script>  

</body>
</html>
Output :

5

6

7

8

9

10

do while loop :
The do while loop is similar to the while loop. This loop will execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.
Syntax:

do{  
    code to be executed  
}while (condition);  
Example :
<html>
<head>
<title>Do While Loop</title>
</head>
<body>

<script type="text/javascript">  
 
  var i=10;  
  do{  
  document.write(i + "<br/>");  
  i++;  
  }while (i<=15);  

</script>
 
</body>
</html>
Output :

10

11

12

13

14

15

for in loop :
A for-in loop iterates through the properties of an object and executes the loop's body once for each enumerable property of the object.
Example :
<html>
<head>
<title>For In Loop</title>
</head>
<body>

<script type="text/javascript"> 
  
  var student = { name:"VVRR", age: 26, degree: "MCA" };
  for (var item in student) {
     document.write(student[item]+"<br />");     // => "Bill", then 25, then "Masters"
  }

</script>  

</body>
</html>
Output :

VVRR

26

MCA

Break statement :
The break statement can also be used to jump out of a loop.
Example :
<html>
<head>
<title>Break Statement</title>
</head>
<body>
 
<p id="my_demo"></p>
 
<script type="text/javascript">
  
var text = "";
var i;
for (i = 0; i < 10; i++) {
    if (i === 3) { break; }
    text += "The number is " + i + "<br>";
}
document.getElementById("my_demo").innerHTML = text;

</script>
 
 
</body>
</html>
Output :

The number is 0

The number is 1

The number is 2

Continue Statement:
The continue statement breaks one iteration (in the loop), if a specified condition occurs, and continues with the next iteration in the loop.
Example :
<html>
<head>
<title>Continue Statement</title>
</head>
<body>
 
<p id="demo_continue"></p>
 
<script type="text/javascript">  

var text = "";
var i;
for (i = 0; i < 10; i++) {
    if (i === 3) { continue; }
    text += "The number is " + i + "<br>";
}
document.getElementById("demo_continue").innerHTML = text;

</script>
 
 
</body>
</html>
Output :

The number is 0

The number is 1

The number is 2

The number is 3

The number is 4

The number is 5

The number is 6

The number is 7

The number is 8

The number is 9