How the JS Call Stack Handles Function Execution

function add(a, b) {
  // Step 4: a = 3, b = 4 bound in environment record
  // Step 5: Execute body
  const sum = a + b;
  return sum; // Step 6: Return 7
}
 
// Step 1: Evaluate arguments (3 and 2+2)
// Step 2-3: Create EC for add, push to stack
const result = add(3, 2 + 2);
// Step 7: add's EC popped
// Step 8: result = 7, execution continues
console.log(result); // 7

let counter = 0;
 
function increment() {
  return ++counter;
}
 
function display(a, b, c) {
  console.log(a, b, c);
}
 
// Arguments are evaluated left to right:
display(increment(), increment(), increment());
// Output: 1 2 3
 
// The call stack at the point of display():
// 1. increment() is called -> returns 1 -> popped
// 2. increment() is called -> returns 2 -> popped
// 3. increment() is called -> returns 3 -> popped
// 4. display(1, 2, 3) is called -> pushed

function modifyPrimitive(x) {
  // x is a COPY of the value 5
  x = 100;
  console.log("Inside:", x); // 100
}
 
let num = 5;
modifyPrimitive(num);
console.log("Outside:", num); // 5 (unchanged)
 
function modifyObject(obj) {
  // obj is a copy of the REFERENCE (not the object itself)
  obj.name = "Modified"; // Mutates the original object
  console.log("Inside:", obj.name); // "Modified"
}
 
const user = { name: "Original" };
modifyObject(user);
console.log("Outside:", user.name); // "Modified" (the object was mutated)

function getFullName(first, last) {
  return `${first} ${last}`; // Return value: "Alice Smith"
  // Execution context is popped after return
}
 
function createUser(first, last) {
  // getFullName() call -> push -> execute -> return "Alice Smith" -> pop
  // The return value replaces the call expression:
  const name = getFullName(first, last); // name = "Alice Smith"
 
  return { name, id: Math.random() };
  // createUser's return value goes back to the global scope call site
}
 
const user = createUser("Alice", "Smith");

function classify(score) {
  if (score >= 90) return "A"; // If reached, function exits here
  if (score >= 80) return "B"; // If reached, function exits here
  if (score >= 70) return "C";
  return "F"; // Default return
}
 
// When classify(85) is called:
// 1. Push classify EC
// 2. score >= 90? No
// 3. score >= 80? Yes -> return "B"
// 4. Pop classify EC immediately (lines below are never reached)

function noReturn() {
  console.log("I do stuff");
  // No return statement
}
 
const result = noReturn(); // undefined
// The stack frame is popped when execution reaches the closing }

function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}
 
function formatName(first, last) {
  // formatName is paused while capitalize runs
  const formattedFirst = capitalize(first);
  // capitalize returns, formatName resumes
  const formattedLast = capitalize(last);
  return `${formattedFirst} ${formattedLast}`;
}
 
function greetUser(first, last) {
  // greetUser is paused while formatName (and its nested calls) run
  const name = formatName(first, last);
  return `Hello, ${name}!`;
}
 
console.log(greetUser("alice", "smith"));
// Stack at deepest point: [Global, greetUser, formatName, capitalize]

function factorial(n) {
  console.log(`Push: factorial(${n})`);
 
  if (n <= 1) {
    console.log(`Base case: return 1`);
    return 1;
  }
 
  const result = n * factorial(n - 1); // Pushes a new frame
  console.log(`Pop: factorial(${n}) = ${result}`);
  return result;
}
 
factorial(4);
 
// Output:
// Push: factorial(4)          Stack: [G, f(4)]
// Push: factorial(3)          Stack: [G, f(4), f(3)]
// Push: factorial(2)          Stack: [G, f(4), f(3), f(2)]
// Push: factorial(1)          Stack: [G, f(4), f(3), f(2), f(1)]
// Base case: return 1         Unwind starts
// Pop: factorial(2) = 2       Stack: [G, f(4), f(3)]
// Pop: factorial(3) = 6       Stack: [G, f(4)]
// Pop: factorial(4) = 24      Stack: [G]

function validateEmail(email) {
  if (!email.includes("@")) {
    throw new Error(`Invalid email: ${email}`);
    // Error is thrown HERE -- validateEmail is on top of stack
  }
  return email;
}
 
function createAccount(data) {
  // No try...catch here -- error propagates upward
  const email = validateEmail(data.email);
  return { email, name: data.name };
}
 
function handleSubmit(formData) {
  try {
    // Error will propagate from validateEmail -> createAccount -> here
    const account = createAccount(formData);
    console.log("Account created:", account);
  } catch (error) {
    // CAUGHT HERE -- unwinding stops
    console.log("Error caught:", error.message);
  }
}
 
handleSubmit({ name: "Alice", email: "invalid" });
// "Error caught: Invalid email: invalid"

function createLogger(prefix) {
  // Frame pushed: { prefix: "APP" }
 
  return function log(message) {
    // log.[[Environment]] -> createLogger's lexical env
    console.log(`[${prefix}] ${message}`);
  };
  // Frame popped, but lexical env { prefix: "APP" } survives
}
 
const appLog = createLogger("APP");
// createLogger's stack frame is GONE
// But appLog still has access to prefix through [[Environment]]
 
appLog("Started"); // [APP] Started
// New frame for log is pushed, resolves prefix via [[Environment]]

function transform(array, callback) {
  const result = [];
  for (let i = 0; i < array.length; i++) {
    // callback is pushed and popped for EACH element
    result.push(callback(array[i], i));
  }
  return result;
}
 
const numbers = [1, 2, 3];
const doubled = transform(numbers, (num) => num * 2);
 
// Stack during first callback:
// [Global, transform, (anonymous callback)]
// callback returns 2, popped
// Stack: [Global, transform]
// Second callback pushed, and so on...

const result = [1, 2, 3, 4, 5]
  .filter((n) => n > 2)    // filter runs, pushes/pops callback 5 times
  .map((n) => n * 10)      // map runs, pushes/pops callback 3 times
  .reduce((sum, n) => sum + n, 0); // reduce runs, pushes/pops 3 times
 
console.log(result); // 120
 
// Each method runs sequentially:
// 1. filter completes entirely (returns [3, 4, 5])
// 2. Then map runs (returns [30, 40, 50])
// 3. Then reduce runs (returns 120)

function deeplyNested() {
  console.trace("Stack check");
  return 42;
}
 
function middle() {
  return deeplyNested();
}
 
function top() {
  return middle();
}
 
top();
// Prints the call stack without interrupting execution

function getStackDepth() {
  let depth = 0;
  try {
    (function recurse() {
      depth++;
      recurse();
    })();
  } catch (e) {
    // Stack overflow caught
  }
  return depth;
}
 
console.log("Max stack depth:", getStackDepth());
// Output varies: ~10,000 to ~25,000 depending on browser

function createStackTracker() {
  let maxDepth = 0;
  let currentDepth = 0;
 
  return {
    push(label) {
      currentDepth++;
      if (currentDepth > maxDepth) maxDepth = currentDepth;
      console.log(`${"  ".repeat(currentDepth)}-> ${label} (depth: ${currentDepth})`);
    },
 
    pop(label) {
      console.log(`${"  ".repeat(currentDepth)}<- ${label}`);
      currentDepth--;
    },
 
    getMaxDepth() {
      return maxDepth;
    }
  };
}
 
const tracker = createStackTracker();
 
function fibTracked(n) {
  tracker.push(`fib(${n})`);
  let result;
  if (n <= 1) {
    result = n;
  } else {
    result = fibTracked(n - 1) + fibTracked(n - 2);
  }
  tracker.pop(`fib(${n}) = ${result}`);
  return result;
}
 
fibTracked(4);
console.log("Max depth:", tracker.getMaxDepth());