Quick Answer

Fix stack overflow errors: identify infinite recursion, add base cases, and optimize recursive functions.

Understanding the Issue

The "Maximum call stack size exceeded" error happens when JavaScript's call stack limit is reached, typically due to infinite recursion or very deep function call chains. Each function call adds a frame to the call stack, and when this stack becomes too large, the browser throws this error to prevent memory exhaustion. Common causes include missing base cases in recursive functions, circular references, or poorly designed recursive algorithms. Understanding recursion principles and implementing proper termination conditions prevents these errors.

The Problem

This code demonstrates the issue:

Javascript Error 
// Problem 1: Infinite recursion - missing base case
function countdown(n) {
    console.log(n);
    countdown(n - 1); // Never stops - no base case!
}

// countdown(5); // RangeError: Maximum call stack size exceeded

// Problem 2: Circular function calls
function functionA() {
    console.log("Function A");
    functionB();
}

function functionB() {
    console.log("Function B");
    functionA(); // Calls A again, creating infinite loop
}

// functionA(); // RangeError: Maximum call stack size exceeded

The Solution

Here's the corrected code:

Javascript Fixed 
// Solution 1: Add proper base cases to recursive functions
function countdown(n) {
    // Base case: stop recursion when n reaches 0
    if (n <= 0) {
        console.log("Done!");
        return;
    }
    
    console.log(n);
    countdown(n - 1);
}

countdown(5); // Works correctly: 5, 4, 3, 2, 1, Done!

// Factorial with proper base case
function factorial(n) {
    if (n <= 1) {
        return 1; // Base case
    }
    return n * factorial(n - 1);
}

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

// Solution 2: Convert recursion to iteration for deep calls
// Recursive approach (can cause stack overflow for large arrays)
function sumArrayRecursive(arr, index = 0) {
    if (index >= arr.length) return 0;
    return arr[index] + sumArrayRecursive(arr, index + 1);
}

// Iterative approach (stack-safe)
function sumArrayIterative(arr) {
    let sum = 0;
    for (let i = 0; i < arr.length; i++) {
        sum += arr[i];
    }
    return sum;
}

// Tree traversal with stack-safe approach
function traverseTreeIterative(node) {
    const stack = [node];
    const result = [];
    
    while (stack.length > 0) {
        const current = stack.pop();
        if (current) {
            result.push(current.value);
            // Add children to stack (in reverse order for correct traversal)
            if (current.children) {
                for (let i = current.children.length - 1; i >= 0; i--) {
                    stack.push(current.children[i]);
                }
            }
        }
    }
    
    return result;
}

// Tail recursion optimization (where supported)
function fibonacciTailRecursive(n, a = 0, b = 1) {
    if (n === 0) return a;
    if (n === 1) return b;
    return fibonacciTailRecursive(n - 1, b, a + b);
}

// Memoization to reduce recursive calls
function fibonacciMemoized() {
    const cache = {};
    
    return function fib(n) {
        if (n in cache) return cache[n];
        if (n <= 1) return n;
        
        cache[n] = fib(n - 1) + fib(n - 2);
        return cache[n];
    };
}

const fibonacci = fibonacciMemoized();
console.log(fibonacci(40)); // Much faster than naive recursion

Key Takeaways

Always include base cases in recursive functions. Convert deep recursion to iteration when possible. Use memoization to optimize recursive algorithms and prevent excessive function calls.