Prev
Home
Next
Menu

JS Loop Control Statements

JS Loops are used to execute the same block of code a specified number of times or while a specified condition is true.

Very often when we write code, we want the same block of code to run over and over again in a row. Instead of adding several almost equal lines in a script we can use loops to perform a repetitive task like this.

In JS there are three different kinds of loops:

  • for loop – loops through a block of code a specified number of times
  • while loop – loops through a block of code while a specified condition is true
  • do-while loop – a variant of the while loop which will always be executed at least once, even if the condition is false, because the code is executed before the condition is tested.

 

The for Loop

The for loop is used when we know in advance how many times the script should run.

for (var=startvalue; var<=endvalue; var=var+increment) 
{    
    code to be executed
}
 
Example.

The example below defines a loop that starts with i=1. The loop will continue to run as long as i is less than, or equal to 5. i will increase by 1 each time the loop runs.

<html>
<body>
<script type="text/javascript">
var i;
for (i=1; i<=5; i++) {
    document.write("The number is " + i);
    document.write("<br>");
}
</script>
</body>
</html>

Output

The number is 1
The number is 2
The number is 3
The number is 4
The number is 5

 

The while loop

The while loop is used when we want the loop to execute and continue executing while the specified condition is true. 

Example. The example is same as above.

<html>
<body>
<script type="text/javascript">
var i=1;
while(i<=5){
  document.write("The number is " + i);
  document.write("<br />");
  i=i+1;
}
</script>
</body>
</html>

Output

Same result as above

 

The do..while Loop

The do…while loop is a variant of the while loop. This loop will always execute a block of code at least once, and then it will repeat the loop as long as the specified condition is true. This loop will always be executed at least once, even if the condition is false, because the code is executed before the condition is tested.

do 
{ 
   code to be executed
}while (var<=endvalue);
 

Example. See the example below.

<html>
<body>
<script type="text/javascript">
var i=1;
do {
   document.write("The number is " + i);
   document.write("<br />");
   i=i+1;
}while (i<1);
</script>
</body>
</html>

Output

The number is 1

 

JS break and continue Statements

There are two special statements that can be used inside loops: break and continue. See examples below.

“break” statement:

The break statement will break the loop and continue executing the code that follows after the loop (if any).

Example. See the following example.

<html>
<body>
<script type="text/javascript">
var i;
for(i=1; i<=5; i++) {
   if(i==3) {
      break; 
   }
   document.write("The number is " + i);
   document.write("<br>");
}
</script>
</body>
</html>

Output

The number is 1
The number is 2
 

“continue” statement :

The continue statement ​will break the current loop and continue with the next value.

Example. See the example below.

<html>
<body>
<script type="text/javascript">
var i;
for(i=1;i<=5;i++) {
   if(i==3) {
      continue; 
   }
   document.write("The number is " + i);
   document.write("<br />");
}
</script>
</body>
</html>​

Output

The number is 1
The number is 2​
The number is 4
The number is 5​​
​
Prev
Home
Next