Platform under construction

Control Flow

Intermediate

while & do while

while loops repeat while a condition stays true. They are useful when the number of repeats depends on changing state.

let attempts = 0;

while (attempts < 3) {
  attempts += 1;
  console.log(`Attempt ${attempts}`);
}

Control Flow

Use while when the stop condition matters more than the counter.

A while loop checks its condition before every iteration. If the condition is false at the start, the loop body never runs.

A do...while loop runs the body once before checking the condition. That makes it useful when the first run must always happen.

while loops are common for queues, retries, reading from a stream, walking through linked data and repeating until a changing condition is complete.

while

Checks the condition first, then runs the block if it is true.

do...while

Runs once, then checks whether to repeat.

State update

Something inside the loop must move the condition toward false.

Queue pattern

Keep processing while items remain.

Examples

Control flow should make the program path easy to follow.

A loop that moves toward completion

const queue = ["validate", "save", "notify"];

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

Condition never changes

let isRunning = true;

while (isRunning) {
  console.log("Still running");
}

// Nothing changes isRunning, so the loop never ends.

Rules that matter

Make branches, loops and exits deliberate.

Control flow decides which path code takes. Keep that path visible: name conditions, protect loop boundaries, avoid accidental fallthrough and use early exits only when they make the main path clearer.

Update the condition

The loop body must eventually make the condition false.

Use a safety limit for risky loops

Retries and external data should have a maximum number of attempts.

Use do...while intentionally

Only use it when the body must run at least once.

Keep side effects obvious

Queue mutation or counter updates should be visible.

Avoid blocking the page

Long synchronous loops can freeze the browser.

Prefer for for known counts

If the repeat count is fixed, a for loop usually reads better.

Production thinking

Reliable branching is reliable behavior.

Why does this matter?

while loops are flexible because they depend on live state. That same flexibility makes them dangerous if the state never changes.

Accessibility

A blocked browser prevents users from interacting with the page, including keyboard and assistive technology users.

Production note

Production while loops should have clear exit conditions, logging for retries and defensive limits around external data.

SEO note

A loop that blocks rendering can delay or prevent important content from becoming available.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Add a fourth task to the queue.
Add a counter that stops after two tasks.
Rewrite the queue example with do...while and explain the difference.

Practice assignment

Do this before moving to the next topic.

Write a while loop with a counter from 0 to 3.
Write a while loop that consumes an array with shift().
Write a do...while loop that runs once.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand while & do while.