Call Stack

The call stack is a data structure that JavaScript uses to keep track of function calls. It follows the LIFO (Last In, First Out) principle—like a stack of plates, the last one placed on top is the first one removed.

When a function is called, a new frame is pushed onto the stack. When the function returns, its frame is popped off.

function first() {
  console.log('first start');
  second();
  console.log('first end');
}

function second() {
  console.log('second start');
  third();
  console.log('second end');
}

function third() {
  console.log('third');
}

first();

Call Stack Progression:

1. first() called → pushed to stack
2. second() called inside first → pushed to stack
3. third() called inside second → pushed to stack
4. third() returns → popped from stack
5. second() returns → popped from stack
6. first() returns → popped from stack

The call stack is now empty, and the program ends.

A stack overflow occurs when the call stack exceeds its maximum size. This typically happens with infinite recursion or deeply nested function calls.

// Infinite recursion - will cause stack overflow
function infinite() {
  return infinite(); // Calls itself forever
}

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

Common Causes

1. Missing base case in recursion

// WRONG - no base case
function countdown(n) {
  console.log(n);
  countdown(n - 1); // Never stops!
}

// CORRECT - with base case
function countdown(n) {
  if (n <= 0) return; // Base case
  console.log(n);
  countdown(n - 1);
}

2. Infinite loops with function calls

function loop() {
  loop(); // Recursive without condition
}

3. Too many nested callbacks

// Deeply nested callbacks can also cause issues
for (let i = 0; i < 100000; i++) {
  (function nested() {
    nested();
  })();
}

How to Prevent

• Always include a base case in recursive functions
• Use iteration instead of recursion when possible
• Set recursion depth limits if needed

JavaScript is single-threaded, meaning it has one call stack. However, it can handle asynchronous operations through the event loop, Web APIs, and callback queues.

When an async operation (like setTimeout or fetch) is encountered:

1. The async function is pushed to the call stack
2. The browser/web API handles the operation in the background
3. The callback is moved to the callback queue
4. The event loop pushes the callback to the call stack when the stack is empty

console.log('Start');

setTimeout(() => {
  console.log('Timeout'); // Runs after current call stack is empty
}, 0);

console.log('End');

// Output:
// Start
// End
// Timeout

Even with a 0ms delay, the timeout callback doesn't execute immediately. It waits in the queue until the call stack is clear.

function fetchData() {
  console.log('Fetching...');
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data));
  console.log('Done'); // Runs before fetch completes
}

fetchData();
// Output:
// Fetching...
// Done
// {data...} (after network request completes)

This is why understanding the call stack is crucial for writing predictable asynchronous code.