JavaScript Execution Context and the Call Stack | DevPrep

JavaScript Execution Context and the Call Stack | DevPrep

console.log(x); // undefined (not ReferenceError!)
console.log(y); // ReferenceError: Cannot access before initialization
var x = 5;
let y = 10;

// Creation Phase:
// 1. var x → initialized to undefined (hoisting)
// 2. let y → in Temporal Dead Zone (TDZ)
// 3. Function declarations → fully hoisted

// Execution Phase:
// 1. console.log(x) → undefined
// 2. console.log(y) → ReferenceError (still in TDZ)
// 3. x = 5
// 4. y = 10

function third() { console.log("third"); }
function second() { third(); }
function first() { second(); }
first();

// Call Stack visualization:
// |           |
// | third()   | ← currently executing
// | second()  |
// | first()   |
// | global    |
// |___________|

// Infinite recursion → stack overflow
function infinite() {
  infinite(); // Each call adds to the stack
}
infinite(); // RangeError: Maximum call stack size exceeded

// Fix: use tail recursion or iteration
function factorial(n, acc = 1) {
  if (n <= 1) return acc;
  return factorial(n - 1, n * acc); // Tail position
}

// Each execution context has its own variable environment
function outer() {
  const a = 1; // outer's variable environment
  
  function inner() {
    const b = 2; // inner's variable environment
    console.log(a + b); // Scope chain: inner → outer → global
  }
  
  inner();
}