Loops and Iteration

Loops repeat work until a condition changes. JavaScript offers several mechanisms because different data sources need different access patterns — indexed arrays, iterable objects, object key enumeration, and async streams each have a idiomatic tool. Choosing the wrong loop creates subtle bugs (mutating while iterating) or readability debt.

Classic for loop — index under your control

The classic for loop gives you an index variable — essential when you need the position, when iterating backwards, or when removing items from an array while walking it (often safer backwards to avoid index shifts). The init; condition; update pattern runs the condition before every body execution; if condition is false initially, the body never runs.

Average: 87.5
Below 80 at index 2 → 75

while and do...while

while evaluates its condition before each iteration — if it starts false, the body never runs. do...while runs the body once first, then checks — useful when you must prompt or fetch at least once before knowing whether to continue. Both require the loop body to eventually make the condition false; otherwise you block the main thread with an infinite loop.

Attempt 1
Attempt 2
Attempt 3
Processing: retry
Done after 3 attempts

for...of — iterate values (preferred)

for...of walks values of iterable objects: arrays, strings, Maps, Sets, NodeLists. It uses the iterator protocol under the hood — the same protocol async generators use later. Syntax is clean and avoids off-by-one index bugs. When you need both index and value, use .entries() with destructuring: for (const [i, item] of list.entries()).

JAVASCRIPT
TYPESCRIPT
SQL
h
i
0 JavaScript
1 TypeScript
2 SQL

for...in — object keys (use carefully)

for...in loops over enumerable property names on an object and its prototype chain unless filtered. That is rarely what you want on arrays — it yields string keys "0", "1", … and may include inherited properties. Object.hasOwn(obj, key) (or hasOwnProperty in older code) limits iteration to own keys. For arrays, prefer for...of or array methods.

host → localhost
port → 4000
debug → true

break and continue

The example below demonstrates "break and continue" in runnable form. Read the comment lines first — they map each step to the mental model from earlier sections, then trace execution top to bottom as the engine would.

First even: 2
row done: 0

When to use array methods instead

break exits the nearest loop entirely; continue skips to the next iteration. Labels (break outer) escape nested loops — rare but clearer than boolean flag variables. Array methods (.map, .filter) cannot break early without throwing or using .some/.every; that is a trade-off between declarative style and performance on large lists.

1. 1Classic for when you need index control or reverse iteration
2. 2for...of for arrays, strings, Maps, Sets
3. 3for...in for object keys — always filter with Object.hasOwn
4. 4break exits; continue skips to next iteration
5. 5Next lesson: function declarations, expressions, and arrows