Loops & Iteration

Computers are brilliant at doing the same thing thousands of times without complaint. Loops are how you tell them to — rendering a list of products, summing a cart, retrying a request, or scanning a file line by line.

Learn Loops & Iteration in our free JavaScript course — a beginner-friendly interactive lesson with runnable examples, a practice exercise and a quick recall.

Part of the free JavaScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

You'll learn the four loop forms, when each one fits, and how to steer them with break and continue .

What You'll Learn in This Lesson

🏃 Real-World Analogy: A loop is like running laps at a track:

• • The start sets your lap counter to 0
• • The condition ("under 10 laps?") is checked before every lap
• • The body is the lap itself
• • break is quitting early; continue is skipping the rest of one lap

🧠 The Classic for Loop

The for loop bundles three parts in its header: an initializer , a condition checked before each pass, and an update run after each pass. Use it when you know how many times to repeat.

⏳ while & do…while

A while loop repeats as long as its condition is true and is perfect when you don't know the count ahead of time. A do…while runs the body once before checking, guaranteeing at least one pass.

🎯 for…of vs for…in — Don't Mix Them Up

This is the single most common loop confusion. for…of walks the values of an iterable; for…in walks the keys of an object. Using the wrong one on an array gives surprising results.

Spot the trap: for…in gave indices as the strings "0" , "1" , "2" — that's why it's wrong for arithmetic on array positions.

🛑 break & continue

break abandons the whole loop; continue skips to the next iteration. They turn a blunt loop into a precise search-or-filter tool.

📋 Which Loop Should I Use?

Loop

Best for

Gives you

for

Known count, need index

A counter you control

while

Repeat until a condition flips

Condition-driven looping

do…while

Must run at least once

Guaranteed first pass

for…of

Array/string/Map values

Each value directly

for…in

Object keys

Each property name

🧩 Reorder Challenge

These lines should sum only the even numbers in an array and print the total. They are scrambled — reorder them so the log is Sum: 6 for [1, 2, 3, 4] .

Why: the accumulator (B) must be declared before the loop so it survives across iterations. Inside, the continue guard (A) must come before the addition (C), otherwise odd numbers would be added before being skipped. The closing brace (E) ends the loop, and the log (F) runs once at the end. Only 2 and 4 are added: 2 + 4 = 6.

🧠 Quick Recall

0 then 2 . When i is 1, continue skips the console.log for that pass only, so 1 is never printed but the loop carries on.

01 then 11 . for…in gives string indices "0" and "1" , so i + 1 is string concatenation: "0" + 1 = "01" . This is exactly why for…of is preferred for arrays.

Once — it logs 5 . do…while runs the body before checking the condition. After x becomes 6, x < 5 is false, so it stops. A plain while would never have run at all.

⚠️ Common Mistakes to Avoid

• 1️⃣ Infinite loops. Forgetting to update the counter (or the condition can never become false) freezes the program. Always ensure progress toward the exit.
• 2️⃣ Off-by-one errors. i <= arr.length reads one past the end; use i < arr.length .
• 3️⃣ for…in on arrays. It yields string keys and can include inherited properties — use for…of .
• 4️⃣ Declaring with var in loops. let gives a fresh binding per iteration, fixing closure bugs in async callbacks.

Frequently Asked Questions

Lesson Complete — Loops & Iteration!

• ✅ for for known counts, while / do…while for conditions
• ✅ for…of gives values, for…in gives object keys
• ✅ break exits the loop; continue skips one iteration
• ✅ Guard against infinite loops and off-by-one errors

Up next: Conditionals & Operators — make decisions with ?? , ?. and the ternary! 🔀

Practice quiz

Continue this course

• Previous: Numbers & Math
• Next: Conditionals & Operators