The while loop in JavaScript is designed for such scenarios where the number of repetitions isn’t fixed upfront and depends on a condition.

Unlike the for loop, which is typically used when you know how many times you need to iterate, the while loop keeps running as long as a condition is true. This makes it ideal for tasks where the stopping condition depends on dynamic factors, such as user input, data from a server, or other external factors.

What is the JavaScript while Loop?

The while loop runs a block of code repeatedly as long as a specified condition is true. It checks the condition before each iteration, and if the condition evaluates to false, the loop stops immediately.

Syntax

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

• condition: A logical expression that determines if the loop should continue running.
• Code block: The statements inside the loop that execute repeatedly while the condition is true.

Why Use the while Loop?

The while loop is useful when:

1. You don’t know the exact number of times the loop should run.
2. The loop needs to stop based on a condition that can change during execution.
3. You want a simple and clear way to handle conditions dynamically.

Example: Basic while Loop

Here’s a simple example that adds numbers to a string while the value of i is less than 5:

1let i = 0;
2let text = "";
3
4while (i < 5) {
5  text += "The number is " + i + "\n";
6  i++; // Increment to avoid infinite loop
7}
8
9console.log(text);

Output:

1The number is 0
2The number is 1
3The number is 2
4The number is 3
5The number is 4

Important Notes

• The loop will stop running once the condition becomes false.
• If you forget to update the variable controlling the condition (e.g., i++), the loop will run forever, potentially crashing your program.

What is JavaScript do while Loop?

The do...while loop is a variation of the while loop. The key difference is that it executes the code block at least once, even if the condition is false, because the condition is checked after the code block runs.

Syntax

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

Example: do while Loop

In this example, the code will run once before checking the condition:

1let i = 5;
2let text = "";
3
4do {
5  text += "The number is " + i + "\n";
6  i++;
7} while (i < 3);
8
9console.log(text);

Output:

1The number is 5

Even though i is already 5 and the condition i < 3 is false, the loop executes the code block once.

while Vs. for Loops

The while loop focuses on the condition, while the for loop provides initialization, condition, and increment in a single line. Both can achieve the same results, but their usage depends on the context.

Example: Using for Loop

1const cars = ["BMW", "Volvo", "Ford"];
2let text = "";
3
4for (let i = 0; i < cars.length; i++) {
5  text += cars[i] + "\n";
6}
7
8console.log(text);

Example: Using while Loop

1const cars = ["BMW", "Volvo", "Ford"];
2let i = 0;
3let text = "";
4
5while (i < cars.length) {
6  text += cars[i] + "\n";
7  i++;
8}
9
10console.log(text);

Both loops produce the same output:

1BMW
2Volvo
3Ford

Key Takeaways

• Use while when you don’t know how many times the loop should run, but you know the stopping condition.
• Use do...while if you want the code block to run at least once, even if the condition is false.
• Always update the variable controlling the condition to avoid infinite loops.
• For fixed iterations, prefer the for loop for better readability.