The Clapping Game

A question asked on every pass

You already have both halves of this. A for loop repeats a block of lines; an if chooses between two outcomes. Put the if inside the loop and its question is no longer asked once — it is asked again for every number the loop hands over, and the answer may come out differently each time.

Twenty passes, twenty decisions, one test.

The braces are what put it inside

Here the curly braces stop being punctuation and start doing the work.

for (let count = 1; count <= 20; count++) {
  if (count === 3) {
    console.log("clap");
  } else {
    console.log(count);
  }
}
console.log("finished");

Each pair of braces marks off the lines belonging to whatever sits in front of it.

• The loop's braces hold the entire if, so the question is asked once per number — twenty times.
• The if braces and the else braces hold one printed line each, and each runs only on the passes where its side of the question was chosen.
• The last line sits after the loop's closing brace, outside everything, so it runs once when the counting is over.

The indentation is there for you, not for JavaScript. Squeeze the whole thing onto one line and it behaves exactly the same:

for (let n = 1; n <= 3; n++) { if (n === 2) { console.log(n); } }

That prints 2 and nothing else — the warning as much as the freedom. A misplaced brace changes what your program means while the shape on screen still looks reasonable, so keeping each closing brace directly under the line that opened it is what keeps the two in agreement.

Every third, not the third one

count === 3 can only be true on one pass out of twenty. To catch 3, 6, 9, 12 and the rest, you need something all of them share: divide any one of them by three and nothing is left over.

% reports that leftover — the same operator that counted the extra pizza slices. 7 % 3 is 1, because two threes fit inside seven and one is left behind. 9 % 3 is 0, because three threes fit exactly. Nothing else answers this question: / never rounds, so 7 / 3 hands you 2.3333333333333335, and Math.floor would say how many threes fit, never whether they fit exactly. A leftover of zero is the mark of every third number, so the test you want measures that leftover against 0.

A worked example

A row of lockers rather than a clapping game, so the rhythm in the editor stays yours to find:

for (let box = 1; box <= 6; box++) {
  if (box % 4 === 0) {
    console.log("Box", box, "has the spare key");
  } else {
    console.log("Box", box);
  }
}
console.log("Row checked.");

Box 1
Box 2
Box 3
Box 4 has the spare key
Box 5
Box 6
Row checked.

Six numbers, six decisions. Only box 4 leaves nothing over when divided by four, so only box 4 takes the first branch. The last line sits outside the loop's braces, which is why it appears once at the bottom rather than after every box.

Your turn

Press Run before changing anything. The count from 1 to 20 arrives neatly, one clap lands at 3, and after that it is numbers all the way, because the test reads:

if (count === 3) {

Replace it with a test that is true for every third count: reach for %, and measure the leftover against 0. The loop, the printing lines, the braces and the banners are finished — the test inside the round brackets is the only thing to touch.

When it works the claps land on 3, 6, 9, 12, 15 and 18, and the beat is readable from across the room.

If something goes wrong

The likeliest slip is the rhythm itself. If the claps come out on 1, 4, 7 and 10, the leftover is being measured against the wrong number: leftovers after threes run 1, 2, 0, 1, 2, 0, and it is the 0 that marks every third count.

If nothing appears at all, not even the top banner, a brace has gone missing. JavaScript reads the whole program before running any of it, so an unclosed block stops the lot. Count them: every { on screen needs a } beneath it. A ReferenceError naming the count means the opposite slip — the if ended up below the loop's closing brace instead of inside it.

And a SyntaxError about an invalid left-hand side means one equals sign where three belong. None of this breaks anything: the program either runs with an odd rhythm or refuses to start, and the fix is one line away either way.