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 .

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

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.

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.

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 abandons the whole loop; continue skips to the next iteration. They turn a blunt loop into a precise search-or-filter tool.

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.

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.

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

Practice quiz

How many times does the body of this loop run: for (let i = 1; i <= 5; i++)?

  • 4
  • 6
  • 5
  • Infinite

Answer: 5. It runs for i = 1,2,3,4,5 — that's 5 iterations because the condition is i <= 5.

Which loop is guaranteed to run its body at least once, even if the condition is false from the start?

  • do…while
  • for
  • while
  • for…of

Answer: do…while. do…while runs the body first and checks the condition afterward, so it always runs at least once.

What does for…of give you when looping over an array?

  • The keys/indices
  • String indices like '0','1'
  • Nothing — it errors on arrays
  • The values (each element)

Answer: The values (each element). for…of walks the VALUES of an iterable, giving you each element directly.

What does for…in give you when looping over an object?

  • The values
  • The keys (property names)
  • Index numbers

Answer: The keys (property names). for…in walks the KEYS (property names) of an object.