Post
Ask Question

Looping Statements in JavaScript

Introduction 

In this article, we learn about concepts of loop statements and loop control statements in JavaScript. Loops in JavaScript allow you to execute a block of code multiple times, while jump control statements enable you to control the flow of your code by skipping or interrupting certain parts of it. Understanding these concepts is crucial for writing efficient and effective JavaScript code. So, let's dive in and explore them in more detail.

The following Looping statements are supported in JavaScript:

  • For Loop
  • While Loop
  • Do while Loop
  • For...In Loop
  • For...Of Loop

For Loop Statement

For loop, when you execute a loop for a fixed number of times, the loop does three specified tasks (Statement 1, Statement 2, Statement 3). The following code shows the general Syntax of the 'for' statement.

Syntax 

for (initialization; condition; increment/ decrement)  
{  
   Executed these statements;  
}  

Example

<!DOCTYPE html>  
<html>  
<head>  
    <title>For Loop Statement in JavaScript</title>  
</head>  
<body>  
    <h2>For loop Statement in JavaScript</h2>  
    <script type="text/javascript">  
        var i;  
        for(i=0;i<=10;i++)  
        {  
            document.write("The number is :" +i +"<br/>");  
        }  
</script>  
</body>  
</html>  

Output

While Loop Statement

The while statement is the simplest of all looping statements. The while loop repeats a block of code, as long as a specified condition is true. In the for loop, we have seen the three specific tasks performed. It is specified at the same place in the Statement, and the same three specific tasks are performed in the while loop also, but the while loop conditions and initialization are occurring in different places. The following code show general Syntax of the While statement:

Syntax

while (condition)  
{  
    Execute these statements; //true  
    Increment/decrement;  
}  

Example

<!DOCTYPE html>  
<html>  
<head>  
    <title>While Loop Statement in JavaScript</title>  
</head>  
<body>  
    <h2>While loop Statement in JavaScript</h2>  
    <script type="text/javascript">  
        var i=0;  
        while(i<=10)  
        {  
            document.write("The number is :" +i +"<br/>");  
            i++;  
        }  
</script>  
</body>  
</html>  

Output

do-while Statement

The do-while statement is similar to the while statement. In the do-while statement, the condition is present at the outside of the statement. It will execute at least once even if the condition is to be not satisfied. If the condition is true, it will continue executing and once the condition becomes false, it stops the code execution. The following code shows general Syntax of the While statement:

Syntax

do   
{  
   Execute the statements;  
   Increment/decrements;  
}  
while (condition) //true  

Example

<!DOCTYPE html>  
<html>  
<head>  
    <title>Do While Loop Statement in JavaScript</title>  
</head>  
<body>  
    <h2>Do While loop Statement in JavaScript</h2>  
    <script type="text/javascript">  
        var i=0;  
        do  
        {  
            document.write("The number is :" +i +"<br/>");  
            i++;  
        }  
        while(i<=10)  
</script>  
</body>  
</html>  

Output

 For...In Loop Statement

The "for...in" loop statement is used to iterate over the properties of an object. It allows you to loop through the object's properties and perform some action on each property. The following code shows the general Syntax of the 'for' statement.

Syntax 

for (variable in object) {
    // Execute these statements
}

Example

<!DOCTYPE html>
<html>
	<head>
		<title>For...In Loop Statement in JavaScript</title>
	</head>
	<body>
		<h2>For...In loop Statement in JavaScript</h2>
		<script type="text/javascript">
			var person = {
			    firstName: "Deepak",
			    lastName: "Tewatia",
			    age: 25
			};
			var text = "";
			var x;
			for (x in person) {
			    text += person[x] + " ";
			}
			document.write(text);
		</script>
	</body>
</html>

Output

For...Of Loop Statement

The "for...of" loop statement in JavaScript is a type of loop that is used to iterate over iterable objects such as arrays, strings, maps, and sets. It allows you to loop through the elements of an iterable object one at a time, without the need for an index variable or the "for" loop's more complex syntax. The following code shows the general Syntax of the 'for' statement.

Syntax 

for (variable of iterable) {
  // code to execute on each iteration
}

Example

<!DOCTYPE html>
<html>
<head>
    <title>For...Of Loop Statement in JavaScript</title>
</head>
<body>
    <h2>For...Of Loop Statement in JavaScript</h2>
    <script type="text/javascript">
        const Names = ['Mahesh', 'Chris', 'Deepak', 'Praveen'];
        for(const name of Names)
        {
            document.write("This is :" +name +"<br/>");
        }
</script>
</body>
</html>

Output

What are loop control statements in JavaScript?

Loop control statements are used to change the normal execution flow of a loop. There are three loop control statements in JavaScript,

  • Break
  • Continue
  • Label

Break statement

The break statement is used to exit a loop before its normal completion. It terminates the current loop and transfers control to the statement immediately following the loop. Here's an example:

for (var i = 1; i <= 10; i++) {
  if (i == 5) {
    break; // exit loop when i equals 5
  }
  document.write("The number is: " + i + "<br>");
}

Output

Continue statement

The continue statement is used to skip an iteration of the loop and continue with the next iteration. It skips the execution of the statements following the continue statement in the current iteration and moves to the next iteration. Here's an example:

for (var i = 1; i <= 10; i++) {
  if (i == 5) {
    continue; // skip iteration when i equals 5
  }
  document.write("The number is: " + i + "<br>");
}

Output

Label statement

The label statement is used to label a statement in JavaScript. It allows you to reference the statement later in your code. This statement is often used with the break or continue statement to control nested loops. Here's an example:

outerloop:
for (var i = 1; i <= 3; i++) {
  for (var j = 1; j <= 3; j++) {
    if (i == 2 && j == 2) {
      continue outerloop; // continue outerloop when i and j equals 2
    }
    document.write("i = " + i + ", j = " + j + "<br>");
  }
}

In the above example, the outerloop label is applied to the outer loop. When i and j are both equal to 2, the continue outerloop statement is executed, and the control transfers to the next iteration of the outer loop.

Output

Conclusion

In this article, we have covered looping statements in JavaScript. I hope you found this article useful. Thank you!


Similar Articles