JavaScript Simplified · One concept, one day, one project · Day 8 of 32

Loops

Repeating work without repeating yourself. You learn the for loop and the while loop, then generate the numbers 1 to 20 automatically.

By the end of today you can

Repeat a block a set number of times with a for loop
Repeat while a condition holds with a while loop
Read the three parts of a for loop (start, condition, step)
Build a number generator

Imagine printing the numbers 1 to 20 by writing twenty console.log lines. Nobody does that. A loop repeats a block of code for you. It is one of the biggest jumps in power you will make, and it closes out the "make JavaScript think" layer.

1. The for Loop

Definition

A for loop repeats a block a known number of times. It has three parts inside its brackets, separated by semicolons: where to start, the condition to keep going, and the step that happens after each round.

What this code doeslet i = 1 starts the counter. i <= 5 keeps the loop running while true. i++ adds 1 after each round. The block runs five times, with i as 1, 2, 3, 4, 5.

app.js

// start at 1; keep going while i is 5 or less; add 1 each time
for (let i = 1; i <= 5; i++) {
  console.log("Round " + i);
}

OUTPUT   TERMINAL

➜ webbo3 node app.js
Round 1
Round 2
Round 3
Round 4
Round 5

i++ is shorthand for "add one to i". The counter i is just a variable; it is traditionally called i, for index.

2. The while Loop

Definition

A while loop repeats as long as a condition is true. Use it when you do not know in advance how many times you will loop, only the condition to stop on.

What this code doesThe loop runs while count > 0. Each round prints and then lowers count, so it reaches 0 and stops. The line that changes count is what ends the loop.

app.js

let count = 3;

while (count > 0) {
  console.log("Countdown: " + count);
  count = count - 1; // move towards stopping
}
console.log("Lift off!");

OUTPUT   TERMINAL

➜ webbo3 node app.js
Countdown: 3
Countdown: 2
Countdown: 1
Lift off!

Always move towards the stop condition

If a while loop never changes the thing it is checking, it runs forever and freezes the page. Every while loop needs a line that moves it closer to stopping, like count = count - 1.

3. Loop Control: break and continue

break stops a loop early. continue skips the rest of the current round and jumps to the next one.

What this code doesThe loop prints 1, 2, 3, then skips 4 (continue), prints 5, 6, then stops at 7 (break). Two handy ways to steer a loop.

app.js

for (let i = 1; i <= 10; i++) {
  if (i === 4) {
    continue; // skip 4
  }
  if (i === 7) {
    break; // stop at 7
  }
  console.log(i);
}

OUTPUT   TERMINAL

➜ webbo3 node app.js
1
2
3
5
6

Today’s Mini Project

🔢 Number Generator

Print the numbers 1 to 20 with a single loop. Then, as a small twist, mark the even ones, using the remainder operator you met on Day 4.

What this code doesOne loop prints all twenty numbers. The ternary plus i % 2 === 0 marks the even ones. Three of this week’s ideas working together: a loop, a condition and a remainder.

app.js

for (let i = 1; i <= 20; i++) {
  // i % 2 === 0 means i divides evenly by 2, so it is even
  const label = i % 2 === 0 ? i + " (even)" : i + "";
  console.log(label);
}

OUTPUT   TERMINAL

➜ webbo3 node app.js
1
2 (even)
3
4 (even)
5
6 (even)
7
8 (even)
9
10 (even)
11
12 (even)
13
14 (even)
15
16 (even)
17
18 (even)
19
20 (even)

Challenge (15 minutes)

Change the loop so it prints only the even numbers from 1 to 20, and nothing else. Expected: 2, 4, 6, ... 20, one per line.

Try This

Write a for loop that prints your name five times.

Expected: your name, five times. Then change the 5 to 3 and watch it print three times.

Picture This

You have finished the first layer. JavaScript can now store values, make decisions and repeat work: it can think. Next week you learn to organise that thinking into reusable pieces, so your programs stop being one long list and start being built from parts.

Checkpoint

What are the three parts inside a for loop’s brackets?

The start (let i = 1), the condition to keep going (i <= 5), and the step after each round (i++). Together they control how many times the block runs.

When would you use a while loop instead of a for loop?

When you do not know how many times you will repeat, only the condition to stop on. A for loop suits a known count; a while loop suits "keep going until this changes".

What is the danger with a while loop?

If nothing moves it towards its stop condition, it runs forever and freezes the page. Always include a line that brings the loop closer to stopping.

Tick Before You Move On

☐ I can repeat a block a set number of times with a for loop
☐ I can repeat while a condition holds with a while loop
☐ I can steer a loop with break and continue
☐ I built the Number Generator

Quick Recap

A loop repeats a block so you do not repeat yourself. A for loop has start, condition and step, and suits a known count. A while loop runs as long as its condition is true. break stops a loop early; continue skips to the next round; always move towards stopping.

Next: Day 9, and a new layer: making JavaScript reusable. You start with functions, named blocks of code you can run again and again.

Loops

1. The for Loop

Definition

2. The while Loop

Definition

3. Loop Control: break and continue

Today’s Mini Project

Checkpoint

Learn this with a real instructor