JavaScript while and do...while Loop

In this tutorial, you'll learn about the while loop and the do...while loop in JavaScript. These loops are essential for executing a block of code repeatedly as long as a specified condition is true. Understanding these loops will help you write more efficient and dynamic JavaScript programs.

Introduction

Loops are fundamental constructs in programming that allow you to execute a block of code multiple times. The while loop and the do...while loop are two types of loops that continue executing as long as a condition remains true. They are particularly useful when the number of iterations is not known beforehand.

Core Content

while Loop

The while loop repeatedly executes a block of code as long as a specified condition evaluates to true. The syntax for a while loop is:

1while (condition) {
2// Code to be executed
3}

• Condition: This is an expression that is evaluated before each iteration. If the condition is true, the loop body executes; otherwise, it exits.

Example 1: Basic while Loop

Let's write a simple program that prints numbers from 1 to 5 using a while loop.

1let i = 1;
2while (i <= 5) {
3console.log(i);
4i++;
5}

1
2
3
4
5

In this example, the loop starts with i equal to 1. The condition i <= 5 is checked before each iteration. If the condition is true, the number is printed, and i is incremented by 1. This process repeats until i becomes greater than 5.

Example 2: Infinite while Loop

Be cautious of creating infinite loops where the condition never evaluates to false. Here's an example:

1let i = 1;
2while (true) {
3console.log(i);
4i++;
5}

do...while Loop

The do...while loop is similar to the while loop, but it guarantees that the loop body is executed at least once. The syntax for a do...while loop is:

1do {
2// Code to be executed
3} while (condition);

• Condition: This is an expression evaluated after each iteration. If the condition is true, the loop continues; otherwise, it exits.

Example 3: Basic do...while Loop

Let's write a program that prints numbers from 1 to 5 using a do...while loop.

1let i = 1;
2do {
3console.log(i);
4i++;
5} while (i <= 5);

1
2
3
4
5

In this example, the loop body is executed first, printing i and incrementing it. Then, the condition i <= 5 is checked. If true, the loop continues; otherwise, it exits.

Example 4: do...while with Initial Condition False

Unlike the while loop, a do...while loop will execute at least once even if the initial condition is false.

1let i = 10;
2do {
3console.log(i);
4i++;
5} while (i <= 5);

10

In this example, the loop body executes once because i is printed before checking the condition. Since i becomes 11 after incrementing, the condition i <= 5 is false, and the loop exits.

Differences Between while and do...while

Practical Example

Let's create a practical example where we use both a while loop and a do...while loop to simulate a simple guessing game. The program will keep asking the user for a number until they guess the correct one.

1let secretNumber = 7;
2let userGuess;
3 
4console.log("Welcome to the Guessing Game!");
5console.log("Guess a number between 1 and 10.");
6 
7// Using while loop
8while (userGuess !== secretNumber) {
9userGuess = parseInt(prompt("Enter your guess:"));
10if (userGuess < secretNumber) {
11  console.log("Too low! Try again.");
12} else if (userGuess > secretNumber) {
13  console.log("Too high! Try again.");
14}
15}
16 
17console.log("Congratulations! You guessed the correct number.");
18 
19// Using do...while loop
20do {
21userGuess = parseInt(prompt("Enter your guess:"));
22if (userGuess < secretNumber) {
23  console.log("Too low! Try again.");
24} else if (userGuess > secretNumber) {
25  console.log("Too high! Try again.");
26}
27} while (userGuess !== secretNumber);
28 
29console.log("Congratulations! You guessed the correct number.");

Summary

• while Loop: Repeats as long as the condition is true.
• do...while Loop: Guarantees at least one execution of the loop body before checking the condition.
• Use while when you want to check the condition before executing the loop.
• Use do...while when you need to ensure that the loop runs at least once.

What's Next?

In the next tutorial, we'll explore how to control loops using the break and continue statements. These statements allow you to exit a loop prematurely or skip certain iterations, providing more flexibility in your programs. Stay tuned!