How Does Recursion Work in JavaScript?

A recursive function is one that calls itself with a smaller version of the same problem. It is correct when two things are true: there is a base case that returns a result without recursing, and the recursive call moves towards that base case.

function sum(numbers) {
  if (numbers.length === 0) {
    return 0;                       // base case
  }
  return numbers[0] + sum(numbers.slice(1));   // smaller problem
}

console.log(sum([1, 2, 3, 4]));   // 10

Every call gets its own stack frame holding its parameters and its local variables, and the frames pile up until a call returns, at which point the frame is popped and control goes back to the caller. That is why the sum above reads naturally: each call adds its own first element to whatever the rest of the array adds up to.

The two failure modes to know about are a missing or unreachable base case, which produces infinite recursion, and a recursive call that does not shrink the problem, which produces the same thing more slowly. Both end in a RangeError when the stack runs out.

There is also a cost consideration. Each call allocates a stack frame, so recursion uses more memory than a loop, and the engine has to copy arguments into every frame. For anything that processes a large collection, a loop is usually the better choice. Recursion earns its place when the problem is naturally recursive, such as traversing a tree structure, where the shape of the code matches the shape of the data and the alternative requires an explicit stack.

The stack of pending calls grows until it hits the engine limit, and then the engine throws a RangeError with the message about the maximum call stack size exceeded. Nothing is corrupted and the program can catch the error, but the work done before the throw is wasted.

function recurse(n) {
  return recurse(n + 1);   // no base case - this never stops
}

try {
  recurse(0);
} catch (err) {
  console.log(err.name);    // "RangeError"
  console.log(err.message); // "Maximum call stack size exceeded"
}

// A correct version with a base case:
function countdown(n) {
  if (n <= 0) return [];
  return [n, ...countdown(n - 1)];
}

console.log(countdown(3));   // [3, 2, 1]

Two things about this failure are worth explaining. First, the limit is on the number of nested calls, not on their total size, and the exact depth depends on the engine, the stack size available and how much each frame uses. Deep recursion of a few thousand frames is usually fine; a hundred thousand is not. That is why algorithms that recurse over user data, such as parsing a deeply nested document, usually need an explicit stack or a conversion to a loop.

Second, the error is catchable, so you can turn a stack overflow into a normal error result. Catching it is not a fix, though. The recursion is still wrong, and any work that happened before the overflow is still in progress.

JavaScript used to have proper tail call optimisation, where a recursive call in tail position replaces the current frame instead of adding one. It was specified and implemented in some engines, but it was removed from the specification because it was not portable, so you should not rely on it. If you want deep recursion, write it with an explicit accumulator or convert it to a loop.

The simplest version takes the first element and adds it to the recursive result for the rest of the array, with an empty array as the base case.

function sum(numbers) {
  if (numbers.length === 0) return 0;
  return numbers[0] + sum(numbers.slice(1));
}

console.log(sum([1, 2, 3, 4]));   // 10

// The same idea with an index, which avoids copying the array each time.
function sumWithIndex(numbers, index = 0) {
  if (index === numbers.length) return 0;
  return numbers[index] + sumWithIndex(numbers, index + 1);
}

console.log(sumWithIndex([1, 2, 3, 4]));   // 10

The difference between the two versions is worth pointing out in an interview. The slice version creates a new array on every call, so it allocates once per element and is quadratic in copying. The index version passes a position along instead, so there is a single array and only the stack frames grow. For a large list, the index version is much cheaper.

A third form uses an accumulator and returns the result at the end rather than on the way back up. It is the shape that maps directly onto an iterative loop, and it is the one to reach for when you need to control the stack depth.

Two habits to mention. Always put the base case first, before any work that touches the input, so the function is safe on empty input. And name the helper the same way you would name a loop variable, so a reader can see the recursion is making progress towards the base case.