JavaScript While Loop

While Loop

The while loop tests its condition before executing the loop body. If the condition is true, the code block runs; if false, the loop terminates immediately. This pre-test structure means the loop might never execute if the condition is initially false. while is fundamentally simpler than for—it only has a condition, no initialization or increment built into the syntax.

The loop executes repeatedly while the condition remains true. Each time the loop body finishes, control returns to the condition check. If still true, another iteration runs. This continues until the condition becomes false, at which point the loop terminates and execution continues with code after the loop.

You must update the condition variable inside the loop body, or the loop will run forever (infinite loop). For example, if you while (i < 10) without ever changing i, the condition never becomes false. Infinite loops freeze programs and must be avoided. Always ensure the loop body makes progress toward the exit condition.

The condition is tested before each iteration, including the first. This means if the condition is false from the start, the loop body never executes—zero iterations. This is different from do...while which always executes at least once. Use while when the loop might not need to run at all.

while loops are ideal when the number of iterations isn't known in advance—processing user input until they quit, reading a file until the end, or retrying an operation until it succeeds. When you know the iteration count, for loops are usually clearer. When you need at least one iteration, do...while is appropriate.

// Basic while loop
let i = 0;

while (i < 5) {
  console.log(i);
  i++;
}

// While with array
const fruits = ["Apple", "Banana", "Orange"];
let index = 0;

while (index < fruits.length) {
  console.log(fruits[index]);
  index++;
}

// User input simulation
let count = 0;
let total = 0;

while (count < 10) {
  total += count;
  count++;
}

console.log(total); // 45

Do...While Loop

The do...while loop tests its condition after executing the loop body, not before. The code block runs first, then the condition is checked. If true, the loop repeats; if false, it terminates. This post-test structure guarantees at least one execution regardless of the condition's initial value.

Because the condition is tested after execution, do...while always executes at least once. Even if the condition is false from the start, the loop body runs once before the condition check terminates it. This is the key difference from while, which might not execute at all.

The condition is tested at the end of each iteration, after the loop body completes. The syntax is do { code } while (condition); with the while and condition appearing after the code block. Note the semicolon after the condition—it's required syntax, unlike other loop structures.

do...while is useful when you want to execute code at least once before checking whether to continue. Common use cases include menu systems (display menu, get choice, repeat if needed), input validation (prompt user, validate, repeat if invalid), or any scenario where the first iteration must always occur.

do...while is less common than while in modern JavaScript. Most scenarios where you'd use do...while can be restructured with while or other patterns. However, it remains useful for its specific guarantee of at least one execution. When that guarantee matches your logic, do...while expresses intent clearly.

// Do...While loop
let i = 0;

do {
  console.log(i);
  i++;
} while (i < 5);

// Executes at least once
let x = 10;

do {
  console.log("Executed!"); // Runs once
  x++;
} while (x < 5);

// Menu example
let choice;

do {
  // Display menu
  console.log("1. Option A");
  console.log("2. Option B");
  console.log("3. Exit");
  // Get choice (simulated)
  choice = 3;
} while (choice !== 3);