JS Loop While

Think of pouring water into a glass, you keep pouring while there's still room left, checking the fill level again before every single pour, and you stop the moment that condition is no longer true. A while loop in JavaScript works the same way, it keeps running its block of code as long as a condition stays true, checking that condition before every single pass through the loop. while loops are especially useful when you don't know in advance exactly how many times you'll need to repeat something, like waiting for a specific response or condition while running scripts on cookiescursor.com.

In this page:

The while Loop
The do...while Loop
while vs for
Avoiding Infinite Loops
When to Use while

The while Loop

A while loop checks its condition before running its block, and continues repeating that block for as long as the condition remains true, stopping the moment it becomes false.

Note: Always make sure something inside the loop body eventually changes the condition, otherwise the loop will never stop on its own.

Warning: If a while loop's condition never becomes false, the browser tab can freeze or crash from an infinite loop.

Example: The while Loop

javascript

let i = 0;
while (i < 3) {
  console.log(i);
  i++;
}

The do...while Loop

A do...while loop runs its block of code first, before checking the condition, guaranteeing the block executes at least once even if the condition is false from the very start.

Note: Use do...while specifically when you need guaranteed first execution, like showing a menu at least once before checking whether to repeat it.

Warning: Don't forget the semicolon after the closing while(condition) in a do...while statement, it's easy to omit by habit from regular while loops.

Example: The do...while Loop

javascript

let i = 5;
do {
  console.log(i);
  i++;
} while (i < 3); // runs once even though condition is false

while vs for

for loops are generally preferred when the number of iterations is known ahead of time, while while loops are better suited to situations where the stopping condition depends on something that can only be checked during the loop itself.

Note: If you find yourself writing let i = 0 before a while loop just to count iterations, a for loop is probably the more natural fit.

Warning: Choosing the wrong loop type doesn't cause errors, but it can make code less readable and harder for others to quickly understand its intent.

Example: while vs for

javascript

// for: iterations known ahead of time
for (let i = 0; i < 3; i++) console.log(i);
// while: stopping point depends on runtime state
let n = 10;
while (n > 1) n = n / 2;
console.log(n);

Avoiding Infinite Loops

An infinite loop occurs when a loop's condition can never become false, causing the code to run forever and typically freezing the browser tab, careful review of the loop's update logic is the best defense.

Note: Before running a new while loop, mentally trace through a few iterations to confirm the condition genuinely becomes false eventually.

Warning: An infinite loop in browser JavaScript can completely freeze the page, requiring a forced tab close, always double check loop conditions carefully.

Example: Avoiding Infinite Loops

javascript

// Avoid this - infinite loop, condition never becomes false:
// let i = 0;
// while (i < 5) { console.log(i); }
let i = 0;
while (i < 5) {
  console.log(i);
  i++; // update makes condition eventually false
}

When to Use while

while loops shine in situations like waiting for a condition to change during processing, repeatedly asking for valid input, or working through a data structure until it's empty, cases where the stopping point genuinely can't be known in advance.

Note: If your loop repeatedly checks 'has this specific thing happened yet', that's usually a strong signal a while loop is the right tool.

Warning: Overusing while for tasks that actually have a known, fixed iteration count adds unnecessary complexity compared to a straightforward for loop.

Example: When to Use while

javascript

let queue = [1, 2, 3];
while (queue.length > 0) {
  console.log(queue.shift());
}

Common Mistakes

Forgetting to update the condition variable inside the loop body, which creates an infinite loop that never stops.
Confusing while and do...while, do...while always runs its block at least once, even if the condition starts false.
Using a while loop when a for loop would be clearer, for is usually better when you already know exactly how many iterations you need.

Chapter Summary

A while loop checks its condition before each iteration and stops as soon as that condition is false.
A do...while loop runs its block once first, then checks the condition, guaranteeing at least one execution.
Careful design is required to avoid infinite loops, always ensure the loop's condition can eventually become false.

Browser Support

while and do...while loops are core JavaScript syntax supported identically in every browser and JavaScript environment.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS Loop For Next Lesson → JS Iterables

JS Loop While

The while Loop

The do...while Loop

while vs for

Avoiding Infinite Loops

When to Use while

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code