Recursion

Functions that call themselves

Recursion means a function calls itself to solve a smaller version of the same problem. The idea sounds circular at first, but you already know the shape from everyday life: solve a big thing by opening a smaller thing inside it, then a smaller one, until you reach the smallest piece that needs no more opening.

A recursive function always has two jobs. First, it needs a direct answer for the smallest input. That is the base case. Second, it needs a way to move every larger input toward that smallest input. That is the recursive case. If either part is missing, the function either stops too soon or never stops.

This lesson is still beginner-level. We will use tiny numbers and a small folder tree so the stack stays visible. Later, the deeper lessons The call stack, Stack limits & stack overflow, Tail calls, and Advanced recursion revisit the same ideas with engine-level detail.

The classic first recursive example is factorial. In math, 4! means 4 × 3 × 2 × 1. Written as a function, factorial(4) can ask for factorial(3), then multiply that answer by 4.

Read the two important lines before stepping:

• if (n === 1) return 1; is the base case. It answers immediately and makes recursion stop.
• return n * factorial(n - 1); is the recursive case. It calls the same function with a smaller number, then multiplies when the smaller answer comes back.

1function factorial(n) {2  if (n === 1) {3    return 1;4  }5  return n * factorial(n - 1);6}7 8const answer = factorial(4);Run9console.log(answer);

Notice the order. JavaScript cannot finish 4 * factorial(3) until factorial(3) returns. That call cannot finish until factorial(2) returns, and so on. The base case is not a decoration; it is the first answer the waiting calls can build on.

Every function call needs a place to remember its parameters, local variables, and where to continue after the call returns. JavaScript tracks those waiting calls with the call stack. When a function is called, a stack frame is pushed on top. When it returns, that frame pops off and the caller underneath continues.

This visualizer records a real fib(4) run. Fibonacci is intentionally repetitive: fib(4) asks for fib(3) and fib(2), and those calls ask for smaller calls again. That repetition is why later lessons introduce memoization, a way to remember answers instead of recomputing them.

1function fib(n) {2  if (n <= 1) return n;3  return fib(n - 1) + fib(n - 2);4}5 6const answer = fib(4);

Recursion without a reachable base case is like standing between two mirrors: the reflections keep going. In code, each reflection is another function call. The stack grows until the engine refuses to add another frame.

Most V8-based browsers and Node.js report this as RangeError: Maximum call stack size exceeded. Other engines can use different wording, such as “too much recursion.” Click the button to run a tiny unsafe function inside try/catch. The page catches the error and shows the approximate depth reached in your browser, which varies by engine and settings.

1let depth = 0;2function noBaseCase() {3  depth = depth + 1;4  return noBaseCase();5}6 7try {8  noBaseCase();9} catch (error) {10  console.log(error.name);11  console.log(depth > 0);12}

The fix is not “make the limit bigger.” The fix is to make sure every recursive step moves toward the base case, or to rewrite the algorithm as a loop when the depth can be large.

Recursion and loops can solve many of the same problems. The earlier Loops: while & for lesson showed how to repeat work with one frame that changes a counter. Recursion repeats work by making new function calls. Both are useful, but they have different costs.

1function sumToRecursive(n) {2  if (n === 0) return 0;3  return n + sumToRecursive(n - 1);4}5 6function sumToLoop(n) {7  let total = 0;8  for (let current = n; current > 0; current = current - 1) {9    total = total + current;10  }11  return total;12}

A good beginner rule: if the data is flat, try a loop first. If the data contains smaller versions of itself, recursion may read like the problem statement. The later Tail calls lesson covers why portable JavaScript should not rely on tail-call optimization.

Recursion shines when your data is recursive too. A folder can contain files and more folders. A comment can have replies, and each reply can have replies. A menu item can have children, and each child can have children. That shape is called a tree.

Stage 3 has full lessons on objects and arrays. For this lesson, read the object literal as a tiny model: folders have a children array, and files have a size. The recursive function does not need to know how deep the tree is. It only knows how to handle one node: if it has no children, count one file; otherwise count each child and add the answers.

1const tree = {2  name: "site",3  children: [4    { name: "index.html", size: 4 },5    {6      name: "assets",7      children: [8        { name: "logo.svg", size: 2 },9        { name: "app.js", size: 6 },10      ],11    },12    { name: "notes.txt", size: 1 },13  ],14};15 16function countFiles(node) {17  if (!node.children) return 1;18  let total = 0;19  for (const child of node.children) {20    total = total + countFiles(child);21  }22  return total;23}

That is the real strength of recursion: the code for “one node” also works for the root, for a folder inside the root, and for a folder several levels down. Each call focuses on its own node and trusts the same function to solve the children.

Where you’ll use this

You do not need recursion for every beginner task, but you will meet it in real front-end work whenever data nests. Common examples include:

• Rendering a navigation menu whose items can contain submenus.
• Counting or searching files in a project tree.
• Walking nested comments or replies in a discussion interface.
• Flattening nested arrays after a data import.
• Splitting a problem in half, such as binary search or divide-and- conquer sorting, when you learn algorithms later.

Common misconceptions

Trace the values before checking the answer. For the writing tasks, paste the solution into your browser console or editor and add your own extra tests.

function factorial(n) {
  if (n === 1) return 1;
  return n * factorial(n - 1);
}
console.log(factorial(5));

function sumTo(n) {
  // your base case and recursive case here
}
console.log(sumTo(5));

function sumTo(n) {
  if (n === 0) return 0;
  return n + sumTo(n - 1);
}
console.log(sumTo(5));

function countDown(n) {
  return countDown(n - 1);
}
console.log(countDown(3));

function countDown(n) {
  if (n === 0) return "done";
  return countDown(n - 1);
}
console.log(countDown(3));

const tree = {
  name: "site",
  children: [
    { name: "index.html", size: 4 },
    { name: "assets", children: [
      { name: "logo.svg", size: 2 },
      { name: "app.js", size: 6 },
    ] },
    { name: "notes.txt", size: 1 },
  ],
};

function countFiles(node) {
  // return 1 for a file; otherwise count every child
}
console.log(countFiles(tree));

const tree = {
  name: "site",
  children: [
    { name: "index.html", size: 4 },
    {
      name: "assets",
      children: [
        { name: "logo.svg", size: 2 },
        { name: "app.js", size: 6 },
      ],
    },
    { name: "notes.txt", size: 1 },
  ],
};

function countFiles(node) {
  if (!node.children) return 1;
  let total = 0;
  for (const child of node.children) {
    total = total + countFiles(child);
  }
  return total;
}
console.log(countFiles(tree));

let n = 3;
const steps = [];
while (n > 0) {
  steps.push(n);
  n = n - 1;
}
steps.push("Go!");
console.log(steps.join(", "));

Every answer explains why it is right or wrong. If a code question feels hard, trace the base case and the recursive case on paper.

Key takeaways

• Recursion means a function calls itself with a smaller version of the same problem.
• Every recursive function needs a reachable base case and a recursive case that moves toward it.
• The call stack grows while calls wait, then shrinks as each call returns.
• Missing or unreachable base cases can throw RangeError when the stack limit is reached.
• Loops are usually better for flat repetition; recursion is often clearer for trees and other nested data.

Up next: Objects & arrays in Stage 3 (text only for now), where the tree-shaped data from this lesson gets its full explanation.