JavaScript while and do…while Loop

In this tutorial, you will learn about while loop and do…while loop with the help of examples.

How to use the loop?

Loops are useful when you need to execute similar lines of code consistently, for a particular number of times or up to a particular condition is valid. Assume you need to type a ‘Welcome’ message multiple times on your site page. Obviously, you should reorder a similar line multiple times. Instead, if you use loops, you can finish this undertaking in only 3 or 4 lines.

• 

In programming, loops are used to rehash a square of code. For instance, if you need to show a message multiple times, at that point you can use a loop. It’s simply a straightforward example; you can accomplish considerably more with loops.

In the previous tutorial, you learned about the JavaScript for loop. Here, you are going to learn about while and do…while loops.

---

JavaScript while Loop

The syntax of the while loop is:

while (condition) {
    // body of loop
}

Here,

• A while loop evaluates the condition inside the parenthesis ().
• If the condition evaluates to true, the code inside the while loop is executed.
• The condition is evaluated again.
• This process continues until the condition is false.
• When the condition evaluates to false, the loop stops.

To learn more about the conditions, visit JavaScript Comparison and Logical Operators.

---

Flowchart of while Loop

• 

---

Example 1: Display Numbers from 1 to 5

// program to display numbers from 1 to 5
// initialize the variable
let i = 1, n = 5;

// while loop from i = 1 to 5
while (i <= n) {
    console.log(i);
    i += 1;
}

Output

1
2
3
4
5

Here is how this program works.

Iteration	Variable	Condition: i <= n	Action
1st	i = 1 n = 5	true	1 is printed. i is increased to 2.
2nd	i = 2 n = 5	true	2 is printed. i is increased to 3.
3rd	i = 3 n = 5	true	3 is printed. i is increased to 4.
4th	i = 4 n = 5	true	4 is printed. i is increased to 5.
5th	i = 5 n = 5	true	5 is printed. i is increased to 6.
6th	i = 6 n = 5	false	The loop is terminated

---

Example 2: Sum of Positive Numbers Only

// program to find the sum of positive numbers
// if the user enters a negative numbers, the loop ends
// the negative number entered is not added to sum

let sum = 0;

// take input from the user
let number = parseInt(prompt('Enter a number: '));

while(number >= 0) {

    // add all positive numbers
    sum += number;

    // take input again if the number is positive
    number = parseInt(prompt('Enter a number: '));
}

// display the sum
console.log(`The sum is ${sum}.`);

Output

Enter a number: 2
Enter a number: 5
Enter a number: 7
Enter a number: 0
Enter a number: -3
The sum is 14.

In the above program, the user is prompted to enter a number.

Here, parseInt() is used on the grounds that prompt() takes input from the user as a string. Also, when numeric strings are added, it carries on as a string. For instance, ‘2’ + ‘3’ = ’23’. So parseInt() changes a numeric string over to number.

The while loop proceeds until the user enters a negative number. During every emphasis, the number entered by the user is added to the sum variable.

At the point when the user enters a negative number, the loop ends. At long last, the absolute sum is shown.

---

JavaScript do…while Loop

The syntax of do…while loop is:

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

Here,

1. The body of the loop is executed at first. Then the condition is evaluated.

2. If the condition evaluates to true, the body of the loop inside the do statement is executed again.

3. The condition is evaluated once again.

4. If the condition evaluates to true, the body of the loop inside the do statement is executed again.

5. This process continues until the condition evaluates to false. Then the loop stops.

Note: do…while loop is similar to the while loop. The only difference is that in do…while loop, the body of the loop is executed at least once.

---

Flowchart of do…while Loop

• 

---

Let’s see the working of do…while loop.

Example 3: Display Numbers from 1 to 5

// program to display numbers
let i = 1;
const n = 5;

// do...while loop from 1 to 5
do {
    console.log(i);
    i++;
} while(i <= n);

Output

1
2
3
4
5

Here is how this program works.

Iteration	Variable	Condition: i <= n	Action
	i = 1 n = 5	not checked	1 is printed. i is increased to 2.
1st	i = 2 n = 5	true	2 is printed. i is increased to 3.
2nd	i = 3 n = 5	true	3 is printed. i is increased to 4.
3rd	i = 4 n = 5	true	4 is printed. i is increased to 5.
4th	i = 5 n = 5	true	6 is printed. i is increased to 6.
5th	i = 6 n = 5	false	The loop is terminated

---

Example 4: Sum of Positive Numbers

// to find the sum of positive numbers
// if the user enters negative number, the loop terminates
// negative number is not added to sum

let sum = 0;
let number = 0;

do {
    sum += number;
    number = parseInt(prompt('Enter a number: '));
} while(number >= 0)

console.log(`The sum is ${sum}.`);

Output

Enter a number: 2
Enter a number: 4
Enter a number: -500
The sum is 6.

Here, the do…while loop proceeds until the user enters a negative number. At the point when the number is negative, the loop ends; the negative number isn’t added to the sum variable.

Output 2

Enter a number: -80
The sum is 0.

The body of the do…while loop runs only once if the user enters a negative number.

---

Infinite while Loop

If the condition of a loop is always true, the loop runs for infinite times (until the memory is full). For example,

// infinite while loop
while(true){
    // body of loop
}

Here is an example of an infinite do…while loop.

// infinite do...while loop
const count = 1;
do {
   // body of loop
} while(count == 1)

In the above programs, the condition is always true. Hence, the loop body will run for infinite times.

---

for Vs while Loop

A for loop is usually used when the number of iterations is known. For example,

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

And while and do…while loops are usually used when the number of iterations are unknown. For example,

while (condition) {
    // body of loop
}

---

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.

JS Control Flow