Understanding the JavaScript Call Stack Guide

function third() {
  console.log("third runs");
  // Stack: [Global, first, second, third]
}
 
function second() {
  console.log("second runs");
  third();
  // After third returns, stack: [Global, first, second]
}
 
function first() {
  console.log("first runs");
  second();
  // After second returns, stack: [Global, first]
}
 
first();
// After first returns, stack: [Global]

function multiply(a, b) {
  // Stack frame for multiply:
  //   Function: multiply
  //   Arguments: a=3, b=4
  //   Return address: line in calculate() after multiply() call
  //   this: undefined (strict) or globalThis
 
  return a * b;
}
 
function calculate(x) {
  // Stack frame for calculate:
  //   Function: calculate
  //   Arguments: x=5
  //   Local: result = undefined -> then 60
  //   Return address: line in global where calculate() was called
 
  const result = multiply(x, 12);
  return result;
}
 
console.log(calculate(5)); // 60

function a() {
  console.log("a start");
  b();
  console.log("a end"); // Runs AFTER b and c both finish
}
 
function b() {
  console.log("b start");
  c();
  console.log("b end"); // Runs AFTER c finishes
}
 
function c() {
  console.log("c start");
  console.log("c end"); // c finishes first (last in, first out)
}
 
a();
// Output:
// a start
// b start
// c start
// c end
// b end
// a end

function longTask() {
  // This blocks the entire thread
  const start = Date.now();
  while (Date.now() - start < 3000) {
    // Busy waiting for 3 seconds
  }
  console.log("Long task done");
}
 
console.log("Before");
longTask();
// NOTHING else can run during those 3 seconds
// No click handlers, no animations, no other code
console.log("After");

// Infinite recursion -- stack overflow!
function infinite() {
  return infinite(); // Pushes a new frame endlessly
}
 
try {
  infinite();
} catch (error) {
  console.log(error.message);
  // "Maximum call stack size exceeded"
}

// Cause 1: Missing base case in recursion
function factorial(n) {
  // BUG: No base case for n <= 0
  return n * factorial(n - 1); // Infinite recursion for any input
}
 
// FIX: Add base case
function factorialFixed(n) {
  if (n <= 1) return 1; // Base case stops recursion
  return n * factorialFixed(n - 1);
}
 
// Cause 2: Mutual recursion without termination
function isEven(n) {
  if (n === 0) return true;
  return isOdd(n - 1);
}
 
function isOdd(n) {
  if (n === 0) return false;
  return isEven(n - 1);
}
 
// Works for small numbers:
console.log(isEven(4)); // true
// Overflows for large numbers:
// console.log(isEven(100000)); // Maximum call stack size exceeded
 
// Cause 3: Accidental recursive setter
const obj = {
  set name(value) {
    this.name = value; // BUG: Calls the setter recursively!
  }
};
// obj.name = "Alice"; // Maximum call stack size exceeded

// Recursive (can overflow for large n)
function sumRecursive(n) {
  if (n <= 0) return 0;
  return n + sumRecursive(n - 1);
}
 
// Iterative (constant stack usage)
function sumIterative(n) {
  let total = 0;
  for (let i = 1; i <= n; i++) {
    total += i;
  }
  return total;
}
 
// Trampoline pattern (recursive style, iterative execution)
function trampoline(fn) {
  return function (...args) {
    let result = fn(...args);
    while (typeof result === "function") {
      result = result();
    }
    return result;
  };
}
 
const sumTrampoline = trampoline(function sum(n, acc = 0) {
  if (n <= 0) return acc;
  return () => sum(n - 1, acc + n); // Return a thunk instead of recursing
});
 
console.log(sumTrampoline(100000)); // 5000050000 (no stack overflow)

function validateAge(age) {
  if (age < 0) {
    throw new Error("Age cannot be negative");
  }
  return age;
}
 
function createUser(name, age) {
  const validAge = validateAge(age);
  return { name, age: validAge };
}
 
function processForm(data) {
  return createUser(data.name, data.age);
}
 
try {
  processForm({ name: "Alice", age: -5 });
} catch (error) {
  console.log(error.stack);
}
 
// Error: Age cannot be negative
//     at validateAge (script.js:3:11)    <-- Error was thrown here
//     at createUser (script.js:9:23)     <-- Called from here
//     at processForm (script.js:14:10)   <-- Called from here
//     at script.js:18:3                  <-- Called from here (global)

console.log("1. Start");        // Runs immediately on call stack
 
setTimeout(() => {
  console.log("3. Timeout");    // Queued in the task queue, runs AFTER stack is clear
}, 0);
 
Promise.resolve().then(() => {
  console.log("2. Promise");    // Queued in the microtask queue, runs before tasks
});
 
console.log("4. End");          // Runs immediately on call stack
 
// Output order:
// 1. Start
// 4. End
// 2. Promise  (microtask runs when stack is empty)
// 3. Timeout  (task runs after microtasks)

function deepFunction() {
  console.trace("Where am I?");
  // Prints the full call stack without throwing an error
}
 
function middle() {
  deepFunction();
}
 
function top() {
  middle();
}
 
top();
// console.trace output:
// Where am I?
//   at deepFunction
//   at middle
//   at top
//   at <global>

function getCallStack() {
  const stack = new Error().stack;
  return stack
    .split("\n")
    .slice(1) // Remove the "Error" line
    .map((line) => line.trim());
}
 
function foo() {
  const stack = getCallStack();
  console.log("Current call stack:");
  stack.forEach((frame) => console.log(" ", frame));
}
 
function bar() {
  foo();
}
 
bar();