JavaScript Recursion Explained with Examples

Recursion in JavaScript is a programming technique where a function calls itself to solve a problem by reducing it into smaller versions of the same problem. A recursive function usually has two parts: a base case, which stops the function, and a recursive case, which moves the problem closer to that stopping condition. In JavaScript, recursion runs on the call stack, so each function call adds a new stack frame until the base case is reached or the stack limit is exceeded. For CS students, interview prep, and day-to-day coding, recursion matters because it is one of the clearest ways to express tree traversal, nested data processing, divide-and-conquer logic, and mathematically defined problems.

If you have ever looked at a recursive example and thought, “I understand the code, but I do not understand why it works,” you are not alone. The mental model is the hard part. Recursion can look like magic until you break it into repeated calls, a stopping condition, and a return path.

What is a recursive function?

A recursive function is simply a function that calls itself.

That sounds circular, but the trick is that each call should work on a smaller or simpler version of the original problem. Eventually, the function reaches a point where it no longer needs to call itself. That is the base case.

Here is the core structure:

function recurse(value) {
  if (/* base case */) {
    return value;
  }

  return recurse(/* smaller input */);
}

There are two concepts you need to keep separate:

Without the base case, the function never stops. Without the recursive case, it is not recursion at all.

A tiny countdown example

function countdown(n) {
  if (n === 0) {
    console.log("Done");
    return;
  }

  console.log(n);
  countdown(n - 1);
}

countdown(3);

Output:

3
2
1
Done

What happens here?

1. countdown(3) logs 3, then calls countdown(2)
2. countdown(2) logs 2, then calls countdown(1)
3. countdown(1) logs 1, then calls countdown(0)
4. countdown(0) hits the base case and stops

That is recursion in its simplest form.

Classic example: factorials in JavaScript

The factorial example shows recursion well because the math definition is already recursive:

• 5! = 5 × 4!
• 4! = 4 × 3!
• 3! = 3 × 2!
• 2! = 2 × 1!
• 1! = 1

So the recursive JavaScript version mirrors the math.

function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  }

  return n * factorial(n - 1);
}

console.log(factorial(5)); // 120

How the calls unfold

When you run factorial(5), JavaScript does not get 120 instantly. It builds a chain of pending calculations:

factorial(5)
= 5 * factorial(4)
= 5 * (4 * factorial(3))
= 5 * (4 * (3 * factorial(2)))
= 5 * (4 * (3 * (2 * factorial(1))))
= 5 * (4 * (3 * (2 * 1)))
= 120

This is the important insight: recursion has two phases.

1. Going down toward the base case
2. Unwinding back up with return values

That second phase is where many learners get lost. The function calls pile up first, and only after the base case returns can JavaScript resolve the pending multiplications.

Visualizing recursion with a call stack mindset

A recursive function uses the call stack just like any other function. Each call waits for the next one to finish.

For factorial(3), the stack conceptually looks like this:

If you want to make recursive code easier to inspect before debugging it, run the snippet through the JS formatter so the base case and recursive branch are visually obvious. That helps a lot when you are reviewing interview solutions or pasted examples.

The danger of infinite recursion

The biggest recursion mistake is failing to make progress toward the base case.

Here is a broken example:

function brokenCountdown(n) {
  console.log(n);
  brokenCountdown(n - 1);
}

This function never stops because there is no base case. Eventually, JavaScript throws an error such as:

RangeError: Maximum call stack size exceeded

That is effectively the recursion version of an infinite loop.

Common causes of recursion bugs

• forgetting the base case
• writing a base case that can never be reached
• passing the wrong next value
• mutating state in a way that prevents the input from shrinking
• assuming all inputs are valid when some edge case skips termination

A safer pattern is to ask two questions before writing any recursive function:

1. What exact condition stops the recursion?
2. How does each call move closer to that condition?

If you cannot answer both clearly, the function is not ready.

Recursive example with nested data

Recursion becomes especially useful when data is nested. That is where loops often become awkward.

Suppose you want to count all primitive values inside a nested array:

function countValues(arr) {
  let count = 0;

  for (const item of arr) {
    if (Array.isArray(item)) {
      count += countValues(item);
    } else {
      count += 1;
    }
  }

  return count;
}

console.log(countValues([1, [2, 3], [4, [5, 6]]])); // 6

This works well because the problem repeats: each nested array is just a smaller version of the same task.

When recursive functions return nested objects or arrays, it can help to inspect the final structure with a JSON formatter or JSON viewer, especially if you are debugging recursive tree output or interview questions involving nested JSON-like data.

Recursion vs. iteration

A common interview and real-world question is not just “Can this be recursive?” but “Should it be recursive?”

Iterative version of factorial

function factorialIterative(n) {
  let result = 1;

  for (let i = 2; i <= n; i++) {
    result *= i;
  }

  return result;
}

Comparison

Use recursion when:

• the problem is naturally hierarchical
• the recursive version is much clearer than the loop
• you are traversing trees, nested arrays, or recursive structures
• the input size will not create dangerous stack depth

Use iteration when:

• the problem is a straightforward linear repetition
• stack depth could become very large
• performance and memory usage are critical
• a loop is easier for your team to maintain

In JavaScript, recursion is elegant, but it is not always the safest choice for very deep input. That is why recursion vs iteration is not a style debate. It is a readability and constraints decision.

A practical debugging pattern for recursive functions

When a recursive function is misbehaving, add logging that shows the input and return path.

function factorialDebug(n) {
  console.log("Entering:", n);

  if (n === 0 || n === 1) {
    console.log("Base case reached:", n);
    return 1;
  }

  const result = n * factorialDebug(n - 1);
  console.log("Returning:", result, "for n =", n);
  return result;
}

This makes recursion much less abstract because you can see:

• when each call starts
• when the base case triggers
• when return values unwind

If you are comparing a recursive and iterative solution during interview prep, a code difference comparison tool can also help highlight which logic changed and whether the recursive version actually improved clarity.

Common interview recursion patterns

Even if this article is beginner-friendly, it helps to know where recursion appears most often:

• factorial
• Fibonacci
• traversing nested arrays
• walking directory-like structures
• tree traversal
• depth-first search
• flattening nested objects
• reversing linked lists
• backtracking problems

The pattern stays the same: define the base case, reduce the problem, and trust the return path.

FAQ

What is a recursive function in JavaScript?

A recursive function is a function that calls itself with a smaller or simpler input until it reaches a base case that stops the recursion.

What is the base case in recursion?

The base case is the stopping condition. It prevents the function from calling itself forever.

Why do recursive functions cause stack overflow errors?

Each recursive call adds a new frame to the call stack. If the recursion never stops or goes too deep, the stack limit is exceeded.

Is recursion better than loops in JavaScript?

Not always. Recursion is often clearer for nested or hierarchical problems, while loops are usually better for simple repetitive tasks and very large input sizes.

How do I get better at recursion?

Trace small examples by hand, write the base case first, and log each call so you can see the function move toward termination.

Run and inspect your recursion code

Recursion gets easier when you can rewrite the example, reformat it, and inspect the output structure clearly. Start by cleaning your snippet with the JS formatter. If your recursive function produces nested output, inspect it with the JSON viewer or JSON formatter. That combination makes the logic easier to follow than staring at a raw block of code.

Final takeaway

JavaScript recursion is not a trick. It is a repeatable way to solve a problem by breaking it into smaller copies of itself. Once you understand the base case, the recursive case, and the return path, examples like factorials, countdowns, and nested data traversal become much easier to reason about.

The main danger is not recursion itself. It is writing recursion without a clear stop condition. If you keep that in mind, recursion becomes one of the most useful mental models in programming, especially for interviews, CS fundamentals, and structured data problems.