Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
JavaScript loops repeat a block of code so you can handle similar work across multiple steps or items without writing a separate copy of the instructions for each one. The three basic forms—for, while, and do...while—mainly differ in where their continuation condition is checked and how they organize setup and updates.
Why use a loop?
A loop runs a block of code again when a rule says another pass is needed. This is useful for repeated tasks such as processing a list or drawing many circles: one set of instructions can handle each pass instead of duplicating the code.
Every loop needs a stopping rule. The code must eventually make its continuation condition false; otherwise, it can run indefinitely.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →How a for loop works
Use for when the counter and stopping rule belong together, such as when you know the range you want to process. Its header has three parts: initialization, condition, and afterthought (often an update).
#1 Best Overall
for (let i = 0; i < 5; i++) {
console.log(i);
}let i = 0initializes the counter once, before the first condition check.i < 5is checked before each pass. If it is false, the loop ends.console.log(i)runs for the current value ofi.i++runs after the body, increasing the counter before the next condition check.
This loop logs the values 0 through 4. When i reaches 5, the condition fails, so the body does not run again. Because the condition is checked first, a for loop can run zero times if its condition is false at the outset.
How a while loop differs
A while loop checks its condition before every pass, but keeps the condition in its header while initialization and updates usually appear elsewhere. It fits repetition controlled by a condition rather than a fixed count.
Rank #2
let attempts = 0;
while (attempts < 3) {
attempts++;
}Here, the body runs while attempts is less than 3. The update inside the body moves the value toward the stopping condition. If the condition is false before the first check, the body runs zero times.
How a do...while loop differs
A do...while loop runs its body first and checks the condition afterward. That makes it useful when an action must happen once before the program can decide whether to repeat—for example, collecting input and then checking whether it is valid.
let input;
do {
input = getInput();
} while (!isValid(input));getInput and isValid are placeholders for functions provided by an application. The body runs at least once, even if the condition would be false afterward.
Which of the three should you choose?
| Form | When the condition is checked | Can the body run zero times? | Good introductory use |
|---|---|---|---|
for |
Before each pass | Yes | A known counter or range, with setup, test, and update together. |
while |
Before each pass | Yes | Repeat while a condition remains true, especially when the stopping point is not a fixed count. |
do...while |
After each pass | No | Perform once, then decide whether another pass is needed. |
How to avoid an infinite loop
Before running a loop, check that each pass changes something relevant to its condition. That might mean incrementing a counter, advancing through a collection, or updating state in another way. If the condition remains true and nothing moves it toward false, the loop may never end.
Rank #4
- Identify what makes the condition true at the start.
- Check where the loop changes the value or state used by that condition.
- Confirm that the change can eventually make the condition false.
What about other JavaScript loops?
for, while, and do...while are three basic control-flow forms, not the entire iteration toolkit. JavaScript also has for...of, which iterates over values in an iterable such as an array, and for...in, which iterates over enumerable object properties. When you need array values and do not need their indexes, MDN recommends considering for...of.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
For more examples and practice, see MDN’s guide to loops and its reference pages for for, while, and do…while.
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.
