JavaScript Loops while, for, do while

JavaScript Loops while, for, do while
5 (100%) 1 vote

JavaScript Loops

JavaScript loops are used to execute the same code multiple times.
They can execute a block of code as long as a specified condition is true.
 

The While Loop

The while loop execute a block of code as long as a specified condition is true.
The While loop has the following syntax:

while (condition) {
    code block to be executed
}

 

Example 6.1
Display numbers from 1 to 10 using While loop
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Display numbers from 1 to 10 using While loop</title>
<script type="text/Javascript">
function myFunction(){
	var num = 1;
	var text = "";
	while (num <= 10){
	text += "<br/>" + num;
	  num++;
	}
	document.getElementById("result").innerHTML = text;
}
</script>
</head>
<body onload="myFunction()">
<h1>Display numbers from 1 to 10 using While loop</h1>
<p id="result">
</p>
</body>
</html>

Be careful!
To avoid infinite loops You must always increment the variable that is used in the condition of the loop (in the example above, the variable num).
Otherwise the loop will never end, which will cause the browser to crash.
 

The Do/While Loop

The Do/While loop has the following syntax:

do {
code block to be executed
}
while (condition);

 
The difference between “while loop” and “do/while loop” is that the condition is set to end.
The Do/While block will always be executed, at least once, before checking the condition, and will repeat the loop as long as the condition is true.
 

Example 6.2
Display numbers from 1 to 10 using Do/While loop
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Display numbers from 1 to 10 using DO While loop</title>
<script type="text/Javascript">
function myFunction(){
    var num = 1;
    var text = "";
    do{
    text += "<br/>" + num;
      num++;
    }while (num <= 10);
    document.getElementById("result").innerHTML = text;
}
</script>
</head>
<body onload="myFunction()">
<h1>Display numbers from 1 to 10 using DO While loop</h1>
<p id="result">
</p>
</body>
</html>

 

Example 6.3
Execution of do / while once even if the condition is false
<script type="text/javascript">
var num = 5;
do{
alert("The number is high");
}
while(num > 100);
</script>

In this case the alert() was executed, even if variable num is less then 100.
 

The For Loop

The For Loop is used to loops through a block of code a number of times.
The for loop has tree steps:
statement 1 = we set the index;
statement 2 = then, check the condition;
and statement 3 = finally, increment the index;
The for loop has the following syntax:

for (statement 1; statement 2; statement3){
    code block to be executed
}

 

The statements

Statement 1 is optional, you can omit the Statement 1, for example if You set values before the loop starts.

Statement 2 is also optional to.
If the Statement 2 returns true, the loop will never end (will start over again), so you must provide a break intruction inside the loop, to stop it.
Break intruction will jump out of the loop.

Statement 3 is optional to, You can omit Statement 3, when You increment the index inside the loop.
The increment don’t have to go by 1, the Statement 3 can be anything.
 

The code block

Regardless of what’s in your loop, it doesn’t matter. Whatever is in the code block between the braces, it will be executed!
 

Example 6.4
Display numbers from 1 to 10 using For loop
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Display numbers from 1 to 10 using For loop</title>
<script type="text/Javascript">
function myFunction(){
	var text = "";
for (var i = 1; i <= 10; i++){
	text += i + "<br/>";
	}
document.getElementById("result").innerHTML = text;
}
</script>
</head>
<body onload="myFunction()">
<h1>Display numbers from 1 to 10 using For loop</h1>
<p id="result">
</p>
</body>
</html>

 

Break

The “break” statement is used to jump out of a loop.
The “break” jump completely out of the loop and continue to execute the code after the loop.

for (var num = 1; num < 10; num++){
	if (num == 5){
		break;
	}
	console.log(num);
}

The result of the above code is: 1,2,3,4
 

Continue

The “continue” statement is similar with break, the difference is that “continue” does not jump completely out of the loop, it jump only the iteration where is found “continue”.
After that continue with the next iteration in the loop.

for (var num = 1; num < 10; num++){
		if (num == 5){
		continue;
	}
	console.log(num);
}

The result of the above code is: 1,2,3,4,6,7,8,9

Leave a Reply

Your email address will not be published. Required fields are marked *