3.9 — Recursion

Lesson 3.6 planted a quiet detail: the stack makes a frame per call, not per function. Which permits something delightfully strange: a function that calls itself. Not a paradox — just the same function getting a second frame, with a different value of n, stacked on top of the first.

This is recursion: solving a problem by handling one slice and handing the rest to… yourself. It shines wherever a problem contains smaller copies of itself — countdowns, nested folders, family trees, the DOM tree you’ll automate in Phase 7. One rule keeps it from running forever, and today it gets a name: the base case.

watch it happen

function countdown(n) {
  if (n === 0) {
    console.log("Liftoff!");
    return;
  }
  console.log(n);
  countdown(n - 1);
}

countdown(3);

The definition is stored — and line 7 contains the strange part: countdown calls countdown. Also note line 2: an if that does NOT recurse. Remember it; it’s the emergency brake.

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.”

Precisely: recursion is a function invoking itself; each invocation gets its own stack frame with its own parameters and locals, exactly like any call (3.6).

The base case is the non-recursive branch that stops the growth; the recursive step must move the argument strictly toward it.

Miss either and the stack hits its height limit: RangeError: Maximum call stack size exceeded — the loop-that-never-ends of the function world, and it even has the same fix: make progress toward stopping.

Anything a loop can do, recursion can do, and vice versa — countdown could have been a for-loop. So when? Loops win for flat, list-shaped work.

Recursion wins when the data is nested — a folder of folders, a menu of submenus, the browser’s DOM tree where every element can contain more elements. “Handle this node, recurse into the children” is a sentence you’ll live inside during Phase 7.

Fun fact: search Google for the word recursion and it asks “Did you mean: recursion?” — a straight-faced joke that clicks forever, planted by Google’s engineers. Try it right now; it’s been running for years.

your turn

⌨️ a function that calls itself — and returns

Recursion meets return: each frame hands its answer DOWN the tower as it unwinds. Sum the numbers from 1 to n without a single loop.

requirements:

A function named sumTo with one parameter: n.
Base case first: if n is 0, return 0 — the escape hatch that stops the tower.
Otherwise return n + sumTo(n - 1) — this frame’s number plus everything below it.
Print sumTo(4) — the tower computes 4 + 3 + 2 + 1 + 0.

when you press RUN, the console must show exactly:

✏️ Quick check 1

At the tallest moment — just as "Liftoff!" prints — how many countdown frames are on the stack? Type the number.

✏️ Quick check 2

Delete the base case (the whole if block). The tower grows until the engine throws — type the famous two-word name of that failure.

✏️ Quick check 3

Recursion’s emergency brake — the branch that answers directly WITHOUT calling again — is called the ___ case. Type the word.

teach it back

🗣️ Now teach it back

Explain recursion to a friend using the stack tower: how can a function call itself without paradox, what is the base case, and what happens if you forget it?

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

Recursion = a function calling itself. Legal because each CALL gets its own frame with its own n.

Two mandatory parts: a base case (answers directly, checked first) + a recursive step that SHRINKS toward it.

Build up, unwind down: frames stack until the base case, then pop in reverse. No base case → stack overflow.

Loops for flat lists; recursion for nested shapes — folders, menus, and Phase 7’s DOM tree.

next: 3.10 Default parameters & pure functions →