JavaScript Execution Context: A Complete Tutorial

// Global execution context is created automatically
var name = "Alice";
let age = 25;
 
function greet() {
  console.log(`Hello, ${name}!`);
}
 
greet();

// After creation phase, before execution:
// name: undefined (var - hoisted and initialized)
// age: <uninitialized> (let - in TDZ)
// greet: function() { ... } (fully stored)
// this: window (browser) or globalThis

// Execution proceeds line by line:
// 1. name = "Alice"  (assignment replaces undefined)
// 2. age = 25        (let exits TDZ, gets initialized)
// 3. greet()         (function call -> new execution context)

var globalVar = "global";
 
function outer() {
  var outerVar = "outer";
 
  function inner() {
    var innerVar = "inner";
    console.log(innerVar);  // "inner"  (own context)
    console.log(outerVar);  // "outer"  (outer context via scope chain)
    console.log(globalVar); // "global" (global context via scope chain)
  }
 
  inner();
}
 
outer();

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();

function a() { b(); }
function b() { c(); }
function c() { throw new Error("Something went wrong"); }
 
a();
// Error: Something went wrong
//     at c (script.js:3)
//     at b (script.js:2)
//     at a (script.js:1)
//     at script.js:5

function infinite() {
  infinite(); // no base case
}
 
infinite();
// RangeError: Maximum call stack size exceeded

function example(param1, param2) {
  var varVariable = "var";
  let letVariable = "let";
  const constVariable = "const";
 
  function innerFunc() {
    return "inner";
  }
}
 
example("a", "b");

// Global context: this = window (browser) or globalThis
console.log(this === window); // true (in browser)
 
// Function call: this = window (non-strict) or undefined (strict)
function standalone() {
  console.log(this);
}
standalone(); // window (non-strict) or undefined (strict)
 
// Method call: this = the object
const user = {
  name: "Alice",
  greet() {
    console.log(this.name);
  },
};
user.greet(); // "Alice" (this = user)
 
// Constructor call: this = new object
function Person(name) {
  this.name = name;
}
const p = new Person("Bob"); // this = new Person instance
 
// Explicit binding: this = specified object
function sayName() {
  console.log(this.name);
}
sayName.call({ name: "Charlie" }); // "Charlie"

const team = {
  name: "Developers",
  members: ["Alice", "Bob"],
  printMembers() {
    // Regular function: 'this' from method call = team
    this.members.forEach((member) => {
      // Arrow function: inherits 'this' from printMembers context
      console.log(`${member} is in ${this.name}`);
    });
  },
};
 
team.printMembers();
// "Alice is in Developers"
// "Bob is in Developers"

const global = "G";
 
function outer() {
  const outerVar = "O";
 
  function middle() {
    const middleVar = "M";
 
    function inner() {
      const innerVar = "I";
 
      // Scope chain resolution:
      console.log(innerVar);  // found in inner's Variable Environment
      console.log(middleVar); // found in middle's Variable Environment
      console.log(outerVar);  // found in outer's Variable Environment
      console.log(global);    // found in global Variable Environment
    }
 
    inner();
  }
 
  middle();
}
 
outer();

function createCounter() {
  let count = 0; // stored in createCounter's Variable Environment
 
  return function increment() {
    count++;
    return count;
  };
}
 
const counter = createCounter();
// createCounter's execution context is popped from the stack
// BUT its Variable Environment is kept alive by the closure
 
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

var x = 10;
 
function foo() {
  var y = 20;
 
  function bar() {
    var z = 30;
    console.log(x + y + z);
  }
 
  bar();
}
 
foo();

console.log("1: Synchronous");
 
setTimeout(function timer() {
  console.log("2: setTimeout callback");
}, 0);
 
Promise.resolve().then(function micro() {
  console.log("3: Promise microtask");
});
 
console.log("4: Synchronous");
 
// Output:
// 1: Synchronous
// 4: Synchronous
// 3: Promise microtask
// 2: setTimeout callback