Content updated
By the end, you can…
- Every loop needs a reason to continue and a reachable way to stop.
- Predict the example's result, change one part, and verify the behavior in your own script.
One idea at a time
A loop repeats a block of statements. Each repetition is an iteration. Instead of copying a log three times, you can count from one to three and use the changing number in the message. First decide which values should appear, then write the start, condition, and update that produce exactly those values.
A for loop keeps these three parts together. A while loop checks a condition before each iteration and leaves you to write the update in the body. A do...while loop checks after its body, so it always runs at least once. Start with short, finite examples because a loop that never stops can freeze a page.
What to remember first
Every loop needs a reason to continue and a reachable way to stop.
Read the code before trying it
for (start; condition; update)Repeat with a counter- The start runs once, the condition is checked before each turn, and the update runs after the body.
i += 1Move toward the end- Increase the counter by one. i++ is another common spelling for this update.
while (condition)Repeat while a condition holds- It can run zero times. Update the value that controls the condition inside the loop.
do { ... } while (condition)Run before checking- The first iteration happens even when the condition starts false.
break and continueControl an iteration- break leaves the loop; continue skips the rest of the current iteration and moves to the next check or update.
Walk through an example
for (let step = 1; step <= 3; step += 1) {
console.log(step);
}step begins at 1. The condition allows 1, 2, and 3; each is logged before the update adds one. When step reaches 4, the condition is false and the body does not run. There are three messages. The counter belongs to this loop's scope, so do not expect to use it outside the loop.
See it happen: try a small change
Predict the result, choose a version, then compare the code and output. Try the controls when the example has them. Each version starts fresh.
Code to notice
for (let step = 1; step <= 3; step += 1) {
console.log(step);
}Live result
What changed: <= includes three, producing three iterations.
Look a little closer
A common boundary pattern starts at zero and uses a strict less-than comparison, such as index < 3. It produces 0, 1, and 2. This will match array indexes in the arrays lesson. Starting at one is fine for human-facing step numbers; choose the pattern that matches the values you actually need.
JavaScript executes this loop synchronously. It does not pause between logs just because each repetition is written separately. A large amount of work can delay other interaction. Later you will learn timers and asynchronous tasks; first practice predicting finite output without adding any timing behavior.
Try it in your own project
Before running, identify the start, stopping condition, and update. Run the five-step loop, then the even-number version. In the while rewrite, keep the update inside the braces so the loop can stop. No timer is needed.
The interactive preview runs in its own isolated document. Its Output panel mirrors console.log messages; it is not a full DevTools console. Choosing another version or resetting starts a fresh example and does not edit your local files. Read any simulation label: storage and request demonstrations explain their offline substitutes, while the written local examples use the real browser APIs.
A common wrong turn
Forgetting to update a while counter can make its condition stay true forever. Changing <= to < also changes whether the boundary is included. Do not experiment with while (true) in these beginner examples; write a small upper limit and check the update before running.
Your turn: repeat a task with loops
Print five numbered practice steps, then print only the even numbers from two through six.
Try this in your own HTML and JavaScript files, then open the page in a browser. There is no separate checked practice for this task yet.
- Use a for loop starting at one and ending at five. Count the five output lines.
- Change the start to two, the limit to six, and the update to += 2. Expect 2, 4, 6.
- Rewrite the first loop as while, keeping the update inside the body. Verify it stops at the same place.
Go to the source
Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.