What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
A JavaScript while loop repeats a block of code as long as a condition is truthy. JavaScript checks the condition before every pass, so if the condition is false from the start, the block never runs. Once you understand that check-then-run order, most loop bugs, including the infinite loop that freezes a page, become easy to predict.
The basic pattern
The syntax is:
while (condition) {
// work to repeat
}The part in parentheses is an expression. JavaScript converts its result to a boolean: values such as true, non-zero numbers, and non-empty strings count as truthy, while false, 0, "", null, undefined, and NaN count as falsy. The body can be a single statement or a block in curly braces. Most beginners should always use braces, because they make it obvious which lines belong to the loop.
As an Amazon Associate I earn from qualifying purchases.
Execution order, step by step
Every pass through a while loop follows the same sequence:
- JavaScript evaluates the condition.
- If the result is truthy, it runs the body once.
- It returns to step 1.
- If the result is falsy, it skips the body and continues with the first statement after the loop.
The MDN Web Docs reference for while – JavaScript states the core rule directly: “The condition is evaluated before executing the statement.” That is why this is called a pre-test loop.
#1 Best Overall
A counter example traced pass by pass
let count = 0;
while (count < 3) {
console.log(count);
count++;
}
console.log("done");Here is what happens on each check:
| Check | count before the check |
count < 3 |
What happens |
|---|---|---|---|
| 1 | 0 | true | Logs 0, then count becomes 1 |
| 2 | 1 | true | Logs 1, then count becomes 2 |
| 3 | 2 | true | Logs 2, then count becomes 3 |
| 4 | 3 | false | Body skipped; loop ends; logs “done” |
The output is 0, 1, 2, then done. The value 3 is never logged, because the condition is checked before the body runs and fails at that point.
Zero passes is a valid outcome
let count = 5;
while (count < 3) {
console.log("never printed");
count++;
}The condition is false on the very first check, so the body runs zero times. Beginners often expect a loop to run at least once; this construct does not do that. If you need the body to run before the first test, use do...while, which evaluates its body first.
Rank #2
How to make sure the loop ends
A loop terminates only when its condition eventually becomes falsy. Before writing one, answer three questions:
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →- Which value does the condition depend on? In the counter example it is
count. - Which statement changes that value inside the body? Here,
count++. - Does the change move the value toward the exit? Incrementing
countbrings it closer to 3, so the condition will eventually fail.
If one of these is missing, the loop can run indefinitely. Consider this broken version:
let count = 0;
while (count < 3) {
console.log(count);
// count never changes
}The condition stays true forever, and the body prints 0 endlessly. Running this in a browser console will freeze the tab until you close it. Save-before-testing habits are worth building for this reason.
Controlling a loop with break and continue
Two statements change the normal flow inside the body:
Rank #4
breakexits the nearest enclosing loop immediately. Execution moves to the statement after the loop, and the condition is not checked again.continueends the current pass early and jumps back to the condition check. It does not exit the loop; if the condition is still true, the next pass begins.
let count = 0;
while (count < 5) {
count++;
if (count === 2) continue; // skip printing 2
if (count === 4) break; // stop entirely at 4
console.log(count);
}
// prints 1, 3A labeled break can exit an outer loop, but beginners rarely need labels; a plain break covers the usual cases.
Recommended Free Tools
Choosing between while, for, and do…while
| Form | When the condition is checked | Typical use |
|---|---|---|
while |
Before every pass, including the first | Repeat while a condition holds, when the number of passes is not known in advance |
for |
Before every pass, with initialization and update grouped in the header | Counting through a known range, such as indexes 0 to length minus 1 |
do...while |
After each pass, so the body runs at least once | Actions that must happen once before deciding whether to repeat |
These are readability choices rather than rules of rank. A for loop is often clearer for simple counting, because its header shows the start, test, and update in one place. A while loop reads better when the stopping point depends on something that happens during the loop, such as reading input until a sentinel value appears.
Troubleshooting a loop that does not behave
- The page freezes or the console hangs. The condition never becomes false. Check that a variable in the condition changes inside the body, and that the change moves toward the exit.
- The body never runs. The condition is false on the first check. Log the variable before the loop to confirm its starting value.
- The last value is missing. Remember that the test happens before each pass. With
count < 3, the body runs for 0, 1, and 2 only. - The loop runs one time too many or too few. Compare
<with<=, and check whether the update happens before or after the logic that depends on it.
Adding a console.log inside the body that prints the variable being tested is the fastest way to see the sequence of checks.
Optional further reading
The MDN reference is enough to understand this single construct. If you want a broader foundation in JavaScript fundamentals, a structured beginner book can help. SAP Press lists Thomas Theis’s Getting Started with JavaScript as a 2025 paperback of 456 pages, and Pearson lists a print edition of Rob Miles’s Begin to Code with JavaScript, a beginner-oriented title with a chapter on repeating actions. These are publisher listings; check current availability and pricing with your preferred bookseller before buying.
Quick Recap
“
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
