JavaScript while and do...while Loops

A JavaScript while loop repeats code while its condition is truthy. The condition is tested before each iteration, so a while loop can execute zero times. A do...while loop checks after the body and therefore executes at least once.

Basic while syntax:

while (condition) {
  // repeated statements
}

Make sure something in the loop changes the state used by the condition, unless another deliberate exit such as break is guaranteed.

Basic JavaScript while Loop Top ↑

This modernizes the original example that printed 0 through 5.

let i = 0;

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

The sequence is 0, 1, 2, 3, 4, 5. When i becomes 6, the condition becomes false and execution continues after the loop.

A while Loop Can Run Zero Times Top ↑

The condition is checked before the first iteration.

let count = 10;

while (count < 5) {
  console.log(count);
}

console.log("Loop finished");

The loop body never executes because 10 < 5 is false immediately.

Stopping a while Loop with break Top ↑

break exits the nearest loop immediately. This preserves the original break example while keeping the counter update clear.

let i = 0;

while (i <= 5) {
  if (i > 2) {
    break;
  }

  console.log(i);
  i += 1;
}

The output is 0, 1, 2. When i becomes 3, break ends the loop.

Using continue Safely in a while Loop Top ↑

continue jumps directly back to the condition check. A common bug is skipping the counter update and creating an infinite loop.

let i = 0;

while (i < 5) {
  i += 1;

  if (i === 3) {
    continue;
  }

  console.log(i);
}

JavaScript do...while Loop Top ↑

A do...while loop places the condition after the body.

let i = 0;

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

The semicolon after the while (condition) portion is part of the normal syntax.

do...while Executes at Least Once Top ↑

let attempts = 5;

do {
  console.log("This runs once");
  attempts += 1;
} while (attempts < 5);

Even though the condition is false, the body executes before that first condition check.

Iterating an Array with while Top ↑

A while loop can iterate an array by index when the index is also needed.

const colors = ["red", "green", "blue"];
let index = 0;

while (index < colors.length) {
  console.log(index, colors[index]);
  index += 1;
}

For simple value iteration, for...of can be more concise. See JavaScript arrays.

Condition-Controlled and Sentinel Loops Top ↑

while is especially useful when the number of iterations is not known in advance. A loop can continue until a value reaches a sentinel state.

const queue = ["task1", "task2", "task3"];

while (queue.length > 0) {
  const task = queue.shift();
  console.log(`Processing ${task}`);
}

When the queue becomes empty, the condition is false.

Intentional and Accidental Infinite Loops Top ↑

while (true) is an intentional infinite loop only when a reliable exit condition exists inside it. In browser code, an uncontrolled infinite loop can block the main thread and make the page unresponsive.

let attempts = 0;

while (true) {
  attempts += 1;

  if (attempts === 3) {
    break;
  }
}

Prefer a direct condition in the while (...) expression when it communicates the stopping rule more clearly.

Nested while Loops Top ↑

A while loop can contain another loop. Remember that work grows with both loops, so nested loops over large data sets can be expensive.

let row = 1;

while (row <= 2) {
  let col = 1;

  while (col <= 3) {
    console.log(`row ${row}, col ${col}`);
    col += 1;
  }

  row += 1;
}

while vs do...while vs for Top ↑

• Use while when repetition depends primarily on a condition and zero iterations are valid.
• Use do...while when the body must happen once before testing whether to repeat.
• Use a classic for loop when initialization, condition, and counter update belong together.
• Use for...of when iterating values from an iterable and you do not need manual counter control.

Pattern Examples from the Original Tutorial Top ↑

The original page linked demonstrations that build patterns using while and for. Those supporting resources remain available:

Demo: printing 0 to 5 and Demo: pattern printing.

Common while and do...while Mistakes Top ↑

• Forgetting to update the condition state.
• Updating in the wrong direction so the condition never becomes false.
• Using continue before the required update.
• Adding a stray semicolon immediately after while (condition) for a normal while loop.
• Forgetting the required trailing semicolon in normal do...while syntax.
• Choosing while for a simple counted loop when for would make all control expressions visible together.

Related Tutorials Top ↑

Continue with JavaScript loops overview, for loops, switch, PHP while loop, and ASP loop basics.

← For Loop switch →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: