3.8 — Higher-order functions & callbacks

Lesson 3.4 handed you a permission slip: functions are values. You’ve stored them in variables — but the permission slip allows something stranger: passing a function INTO another function, as an argument, like any number or string. (There’s the 3.4 tease, cashed in.)

Why on earth? Because it splits work perfectly: one function knows how often or when something should happen; the other knows what should happen. “Run this after 3 seconds.” “Run this when the button is clicked.” “Run this for every test in the list.” The this in all three sentences is a function you pass in — and every Playwright test you’ll ever write starts exactly that way: test("name", ...) hands the test runner a function.

watch it happen

function repeat(times, action) {
  for (let i = 1; i <= times; i++) {
    action(i);
  }
}

function cheer(round) {
  console.log("Round " + round + ": hooray!");
}

repeat(3, cheer);

Two definitions, nothing runs. Look closely at repeat: its second parameter, action, is expected to receive a FUNCTION — and line 3 calls it: action(i).

console(nothing logged yet)

under the hood

The deeper story, with the real names for things — this part is what turns “I saw it” into “I can explain it.”

The two terms, precisely. A higher-order function is any function that takes a function as an argument, or returns one. 3.7’s makeCounter was already one — it returned a function.

A callback is the function you pass in, named for the promise it carries: “don’t run this now — call it back when the moment comes.” The moment might be “each loop lap” (today), “when the timer fires” (Phase 6), or “when the user clicks” (Phase 7).

The gotcha that bites everyone once: repeat(3, cheer) passes the function; repeat(3, cheer()) runs cheer immediately and passes whatever it returns — here undefined, since cheer has no return. Then repeat tries undefined(1) and crashes with TypeError: action is not a function. Parentheses are the GO button (3.1) — when handing a function over, you don’t press GO.

In memory (the Phase 1 picture, now in real words): the parameter action simply points at the same function value that cheer points at. Nothing is copied, no magic. (Phase 4 gives this pointing its precise name: a reference.)

your turn

⌨️ a function that receives TWO functions

The watched code took one callback — yours takes two, and decides the order they run. You are now the schedule.

requirements:

Two tiny functions: morning prints wake up; night prints sleep.
A function named fullDay with TWO parameters — first and second — that calls first(), then second().
Call fullDay(morning, night) — both handed over as values: no parentheses on either.

when you press RUN, the console must show exactly:

wake up

sleep

✏️ Quick check 1

The classic mistake — repeat(3, cheer()) with parentheses. Type what value arrives in the action parameter:

✏️ Quick check 2

A function passed into another function, to be run later, is called a ___. Type the word.

✏️ Quick check 3

Type exactly the LAST line this program prints:

teach it back

🗣️ Now teach it back

Explain higher-order functions and callbacks to a friend — including why repeat(3, cheer) has no parentheses on cheer, and what goes wrong if you add them.

Write it as if your friend is sitting next to you. Saved to your journal — future-you will use these notes to teach others.

a few sentences, minimum — you’ve got this

to remember

Higher-order function = takes a function in (or hands one back). Callback = the function passed in, run later.

repeat(3, cheer): no parentheses — you hand over the function itself. cheer() would run it NOW and pass undefined.

The split: the higher-order function owns WHEN/HOW OFTEN; the callback owns WHAT. Timers, clicks, tests — all this shape.

Phase 10 preview: test("login works", callback) — your whole job will be writing callbacks.

next: 3.9 Recursion →