JavaScript Loops while, for, do while

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 executes 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
}

 

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()">
<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.
 

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()">
<p id="result">
</p>
</body>
</html>

 

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
}

 
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 Statement 2 returns true, the loop will never end (will start over again), so you must provide a break instruction inside the loop, to stop it.
Break instruction will jump out of the loop.

Statement 3 is optional too, You can omit Statement 3, when You increment the index inside the loop.
The increment doesn’t have to go by 1, 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!
 

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()">
<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

Javascript loop examples

Print Vowels and Consonants

First, print each vowel in s on a new line. The English vowels are a, e, i, o, and u, and each vowel must be printed in the same order as it appeared in.
Second, print each consonant (i.e., non-vowel) in s on a new line in the same order as it appeared in.

function vowelsAndConsonants(s) {
    let consonents = [];
    for (let l in s){
        if ("aeiou".includes(s[l])){
            console.log(s[l]);    
        }
        else {
            consonents.push(s[l]);
        }
    }
    for (let nV in consonents){
        console.log(consonents[nV]);
    }
}

Hello there!

I hope you find this post useful!

I'm Mihai, an online marketing specialist, very passionate about everything that means online marketing, focused on eCommerce.

If you have a collaboration proposal or need helps with your projects feel free to contact me. I will always be glad to help you!

Leave a Reply

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