blog

Home / DeveloperSection / Blogs / Loop in JavaScript

Loop in JavaScript

Jonas Stuart 2149 06-Jul-2016

In this section we will learn about following loops in JavaScript:

  •   For loop
  •   While loop
  •   Do while loop
  •    Continue statement
  •    Break statement

For loop in JavaScript                   

For loop is executed for a specified number of times. It has three important parts:

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

Following is the syntax of for loop:

Syntax

for (state 1; state 2; state 3) {

    statement to be executed
}

 Following is the example of for loop:

Code implementation

<html>
<body>
<button onclick="myFirst ()">Click me</button>
<p id="example"></p>
<script>
function myFirst() {
    var test = "";
    var a = 10;
    while (a < 20) {
        test += "<br>following are the number " + a;
        a++;
    }
    document.getElementById("example").innerHTML = test;
}
</script>
</body>
</html>

 While loop In JavaScript

The while loop execute the code till the test expression is true and when the expression becomes false loop terminates. Following is the syntax of while loop in JavaScript:

Syntax  

while (expression){

code block to be executed if expression is true
}

Following is the example of while loop in JavaScript:

Code implementation  

<html>

<body>
<button onclick="myFirst()">click me</button>
<p id="example"></p>
<script>
function myFirst() {
    var test = "";
    var a =1 0;
    while (a < 20) {
        test += "<br>The number is " + a;
        a++;
    }
    document.getElementById("example").innerHTML = test;
}
</script>
</body>
</html>

 Code output

The number is 10

The number is 11

The number is 12

The number is 13

The number is 14

The number is 15

The number is 16

The number is 17

The number is 18

The number is 19
 

Do while loop in JavaScript

Do while loop will execute the statement once, before checking if the condition is true, and if the condition is true it will continue to execute till the condition becomes false. Following is the syntax of do while loop in JavaScript:

Syntax

do {

statement to be executed
}
while (condition);

 Following is the example of do while loop in JavaScript:

Code Implementation

<html>

<body>
<button onclick="myFirst()">Try it</button>
<p id="example"></p>
<script>
function myFirst() {
    var test = ""
    var a =10;
    do {
        test += "<br>The number is " +a;
        a++;
    }
    while (a < 20)
    document.getElementById("example").innerHTML = test;
}
</script>
</body>
</html>


Code output:

The number is 10
The number is 11
The number is 12
The number is 13
The number is 14
The number is 15
The number is 16
The number is 17
The number is 18
The number is 19
 

Continue statement

The continue statement immediately start the next iteration of the loop and leave the remaining code block. When a continue statement is executed, the program flow moves to the loop check expression and if the condition remains true, then it starts the next iteration, otherwise the control comes out of the loop. Following is the example of continue statement:

Code Implementation

<html>

<body>
<p id="example"></p>
<script>
var test = "";
var a;
for (a= 10; a < 20; a++) {
    if (a === 15) { continue; }
    test += "The number is " + a + "<br>";
}
document.getElementById("example").innerHTML = test;
</script>
</body>
</html>

 Code output

The number is 10
The number is 11
The number is 12
The number is 13
The number is 14
The number is 16
The number is 17
The number is 18
The number is 19

 Break Statement

The break statement is used to terminate the statement prematurely. These type of statement are situated inside the statement. It gives you full control and whenever you want to come out from the statement you can by using break statement. Following is the example of break statement:

Code Implementation

<html>

<body>
<p id="example"></p>
<script>
var test = "";
var a;
for (a= 10; a < 20; a++) {
    if (i === 13) { break; }
    test += "The number is " + s + "<br>";
}
document.getElementById("example").innerHTML = test;
</script>
</body>
</html>

Code output

The number is 10
The number is 11
The number is 12

 


Updated 16-Mar-2018

Leave Comment

Comments

Liked By