JavaScript While Loop

In this tutorial, you will learn about JavaScript While loop and JavaScript Do while loop. In the previous tutorial, we have seen JavaScript Operators. JavaScript While loop is used to execute a block of code as long as the condition is true.

In programming languages, loops are used to execute a block of code a number of times. Suppose we want to print numbers from 1 to 100, Then we have two ways, the first is using for loop and the second is using while loop. Except for printing numbers, you can perform more critical operations using loops.

In this guide, we will see various examples to understand while loop and do while loop.

JavaScript While Loop

JavaScript while Loop is used to execute a block of code as long as the condition is true. It will only stop when the condition becomes false.

Sometimes we want to execute a block of code as long as the condition true, Then we can use javascript while loop.

Syntax

while( condition )
{
	// block of code
};

Working of while loop,

• A while loop evaluates the condition inside the parenthesis ().
• If the condition returns true, it executes the while loop.
• Condition is evaluated again.
• This process is continued until the condition returns false.
• When the condition evaluates false, the loop will stop.

JavaScript While Loop Flowchart

Example: Display number from 1 to 10

// Display number fom 1 to 10 using while loop.
<script>
var i = 0;
while (i < 10 )
{
	console.log(i);
	i++;

};
</script>

Output

1
2
3
4
5
6
7
8
9
10

Example: Print only even numbers from 1 to 10

// Display only even numbers from 1 to 10
<script>
var i = 1;
while(i <= 10)
{
	if( i%2 == 0)
	{
		console.log(i);
	}
	
	i++;
}
</script>

Output

2
4
6
8
10

JavaScript do..while loop

The JavaScript do….loop is another variant of while loop.This loop execute block of code once, before checking the condition.

Syntax

do 
{
	// block of code	
}
while(condition );

Working of JavaScript do while loop:

• The body of the loop is executed first and then checking the condition.
• If the condition evaluates true, Then the body of the do statement executed again.
• The condition is evaluated again.
• If the condition evaluates true, the body of the do statement executed again.
• This process continues until the condition evaluates false, Then the loop stops.

Flowchart of do..while loop

Example: Display all odd numbers from 1 to 20:

<script>
var i = 1;
while(i <= 20)
{
	if( i%2 != 0)
	{
		console.log(i);
	}
	
	i++;
}
</script>

Output

1
3
5
7
9
11
13
15
17
19

For loop vs While loop

A for loop used only, when we already knew the number of iterations. For example:

// this loop is iterated 5 times.
for ( var i = 1; i <= 5; i++)
{
	// body of the loop
}

A while loop used only, when the number of iterations are not exactly known.

while(condition)
{
	// body of the loop
}

Conclusion

In this JavaScript article, you have learned all about JavaScript while loop and do while loop along with the examples. Loops are very important in programming languages because using loops you can perform easy and complex operations.

If you like this article, please share and keep visiting for further JavaScript tutorials.