Loops

Course 1 · Ch 4

Loops: for, while, for...of, for...in

Four loop styles — two should feel familiar from PHP, two are genuinely new and JavaScript-specific

for and while work essentially identically to PHP. for...of and for...in are new — and easily confused with each other, since their names look so similar despite doing genuinely different things.

for — Known Repeat Count

for (let i = 1; i <= 5; i++) {
  console.log(`Count: ${i}`);
}

Identical structure to PHP Fundamentals Chapter 4 — initialiser, condition, step. Note let i rather than a plain variable — declaring the loop counter with let keeps it properly block-scoped to the loop.

while / do...while

let attempts = 0;

while (attempts < 3) {
  attempts++;
  console.log(`Attempt ${attempts}`);
}

Same behaviour as PHP — checks the condition before each iteration. do...while also exists in JavaScript with identical "runs at least once" semantics.

for...of — Iterating Over Values (Arrays, Strings)

const colours = ["red", "green", "blue"];

for (const colour of colours) {
  console.log(colour);
}
// "red"
// "green"
// "blue"

for...of gives you each value directly, one at a time — the closest JavaScript equivalent to PHP's foreach ($array as $value) from Fundamentals Chapter 4. It works on arrays, strings (iterating character by character), and several other "iterable" types covered later in the series.

for...in — Iterating Over Keys/Property Names

const person = { name: "Philip", age: 35 };

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}
// "name: Philip"
// "age: 35"

for...in gives you each key (property name) — designed for plain objects, where there's no single "value" to iterate directly the way an array has. Objects are covered fully in Chapter 7; this is enough to use for...in productively now.

Don't use for...in on arrays — use for...of instead

for...in on an array technically works, but iterates over the array's indexes (as strings: "0", "1", "2"), not its values — and can also pick up unexpected extra properties in some situations. The clear rule: arrays → for...of (or array methods, Chapter 6). Plain objects → for...in (or Object.keys(), also Chapter 7).

break and continue

for (let i = 1; i <= 10; i++) {
  if (i === 7) {
    break;       // exits the loop entirely
  }
  if (i % 2 === 0) {
    continue;    // skips to the next iteration
  }
  console.log(i);
}
// 1, 3, 5

Behave identically to PHP — break exits the loop, continue skips to the next iteration.

Loop	Best for
for	Known/calculable repeat count
while / do...while	Unknown count, condition-driven
for...of	Iterating array VALUES (or string characters)
for...in	Iterating object KEYS/property names

A preview: array methods often replace loops entirely

Chapter 6 introduces map(), filter(), and forEach() — methods that handle many common "loop over an array and do something" tasks more concisely than a manual loop. Both approaches matter: loops are more flexible and universal, array methods are often clearer for simple transformations.

Coding Challenges

Challenge 1

Use a for loop to console.log() the 9 times table from 9×1 to 9×12, one line per result.

📄 View solution

Challenge 2

Given const fruits = ["apple", "banana", "cherry", "date"], use for...of to log each fruit, and a separate for...in loop on const car = { make: "Toyota", model: "Corolla", year: 2022 } to log each key and its value. Add a comment explaining why for...in would be the wrong choice for the fruits array.

📄 View solution

Challenge 3

Use a while loop to find and log the first power of 2 that exceeds 1000 (i.e. keep doubling a starting value of 1 until it's greater than 1000), logging each doubled value along the way.

📄 View solution

Chapter 4 Quick Reference

for (init; condition; step) — known/calculable repeat count, same as PHP
while / do...while — condition-driven, same as PHP
for...of — iterates VALUES of an array/string; closest equivalent to PHP's foreach
for...in — iterates KEYS of a plain object; do NOT use on arrays
break / continue — same behaviour as PHP
Array methods (map/filter/forEach, Ch 6) often replace manual loops for simple cases
Next chapter: functions — declarations, expressions, arrow functions, scope