Loops: Repeat Without Copy-Paste

16 minBeginnerHTML · CSS · JS

In this lesson

Write for, for...of and while loops and choose the right one
Use an accumulator variable to build a total or a new array
Control a loop with break and continue, and recognise an infinite loop

The big idea

A loop runs the same block of code again and again while a condition stays true. Your job is to make sure that condition eventually becomes false.

map and filter cover many list jobs, but sometimes you need full control: add things up, stop early, or repeat until something happens. That's what loops are for.

The classic for loop

JavaScript

//   start      keep going while   step after each round
for (let i = 0; i < 3;             i++) {
  console.log("i is " + i);
}
// i is 0
// i is 1
// i is 2

Start: let i = 0 runs once, before anything else.
Condition: before every round, i < 3 is checked. If it's false, the loop ends.
Step: after every round, i++ adds 1 to i.

for...of — the friendly way to walk an array

With an index

JavaScript

for (let i = 0; i < prices.length; i++) {
  console.log(prices[i]);
}

With for...of

JavaScript

for (const price of prices) {
  console.log(price);
}

Both print every price. Use for...of when you just need each item; use an index when you need the position too.

The most common loop pattern is the accumulator: start with an empty value before the loop, update it inside, use it after.

JavaScript

const orders = [
  { item: "Nasi Lemak", qty: 2, price: 6.5 },
  { item: "Teh Tarik", qty: 3, price: 2.5 },
];

let bill = 0;                       // 1. before
for (const order of orders) {
  bill += order.qty * order.price;  // 2. inside
}
console.log("RM " + bill);          // 3. after → RM 20.5

break, continue and while

JavaScript

for (const order of orders) {
  if (order.qty === 0) continue; // skip this round, go to the next one
  if (order.price > 100) break;  // stop the whole loop right now
  console.log(order.item);
}

// while: repeat as long as the condition is true — useful when
// you don't know in advance how many rounds you need
let savings = 100;
let months = 0;
while (savings < 1000) {
  savings += 150;
  months++;
}
console.log(months); // 6

Infinite loops

If the condition never becomes false, the loop never ends and the page freezes. Typical causes: forgetting i++, updating the wrong variable, or a value that can never reach the target (doubling 0 stays 0 forever). Ask yourself: what changes each round, and does it move towards the exit?

WANCode's safety net

In this preview, any loop that runs for more than 1.5 seconds is stopped automatically and the Console tells you which line it was on. A real browser tab has no such net — it just freezes until you close it.

Finish the two functions in script.js:

1. total(numbers) adds up every number in the array and returns the sum. total([]) is 0.

2. countdown(n) returns a new array counting down from n to 1: countdown(3) is [3, 2, 1] and countdown(0) is [].

Checks

total adds up any array
countdown builds [n … 1]

Check understanding

How many times does for (let i = 0; i < 5; i++) { … } run its body?

456

What does continue do inside a loop?

Ends the whole loopSkips the rest of this round and moves to the next oneRestarts the loop from the beginning

Why does let i = 0; while (i < 3) { console.log(i); } never stop?

while loops can't use <i never changes, so i < 3 stays true foreverconsole.log restarts the loop

What you learned

for is great for counting, for...of for walking through an array, while for "repeat until…".
The accumulator pattern: set up before the loop, update inside, use after.
continue skips one round; break stops the loop early.
Every loop needs something that moves it towards its exit — otherwise it's an infinite loop.

Preview

Console output from your code appears here.