Scenario

Before JavaScript runs a single line of your code, it has already built an invisible "box" around it.

That box is called an Execution Context - and if you don't understand it, you will never understand why console.log(x) sometimes prints undefined instead of throwing an error, or why this behaves differently inside a function versus at the top of the file.

Every function call creates a brand-new Execution Context. Every script starts with a Global one. And every Execution Context runs in TWO phases - one you can see, and one that happens silently before any of your code executes.

The Invisible Box Around Your Code

Every time JavaScript runs your code, it creates an Execution Context - think of it as a box that holds everything needed to run that piece of code.

There are 3 types:

Type	When Created	What It Contains
Global Execution Context (GEC)	When the script first loads	Global object (`window`/`global`), `this`, global variables
Function Execution Context (FEC)	Every time a function is called	Arguments, local variables, `this` binding
Eval Execution Context	When `eval()` runs	(Rarely used, avoid in production)

How It Works - Two Phases

Every execution context goes through two phases:

Phase 1: Creation Phase (Memory Allocation)

Variables declared with var -> stored as undefined
Variables declared with let/const -> stored but uninitialized (TDZ)
Functions declared with function keyword -> stored with full body

Phase 2: Execution Phase (Code Runs Line by Line)

Variables get their actual values assigned
Functions get called
Expressions get evaluated

Code Example

var name = "Rakibul";
function greet() {
    var message = "Hello";
    console.log(message + " " + name);
}
greet();

What happens behind the scenes:

// === CREATION PHASE (Global Context) ===
// memory: { window: global object, this: window, name: undefined, greet: fn() }

// === EXECUTION PHASE ===
// name = "Rakibul"
// greet() is called -> NEW Function Execution Context created

    // === CREATION PHASE (greet Context) ===
    // memory: { arguments: {}, this: window, message: undefined }

    // === EXECUTION PHASE ===
    // message = "Hello"
    // console.log("Hello Rakibul")

// greet's context is DESTROYED after it finishes

Common Mistakes

Thinking code runs strictly top-to-bottom - in reality, the Creation Phase scans the whole scope first and allocates memory before any line executes.
Assuming a Function Execution Context persists after the function returns - it's destroyed and its local variables are eligible for garbage collection.
Confusing the Global Execution Context with the window object - the GEC contains much more than window (it also holds this, the scope chain, and variable environment records).

Interview Questions

Q: Is JavaScript Interpreted or Compiled ?

JavaScript is neither purely interpreted nor purely compiled. Modern JavaScript engines like V8 use Just-In-Time (JIT) compilation. The engine first parses the code, generates bytecode, interprets it, and then compiles frequently executed code into optimized machine code for better performance.

Q: What are the two phases of an Execution Context?

Creation Phase (memory allocation - var becomes undefined, let/const go into Temporal Dead Zone (TDZ), function declarations are fully stored) and Execution Phase (code runs line by line, assignments happen, functions are called).

Q: What's the difference between Global and Function Execution Context?

The Global EC is created once when the script starts, holds global variables and this (pointing to window in browsers). A Function EC is created every time a function is invoked, holds that function's local variables, arguments, and its own this binding. The Function EC is destroyed after the function returns.

Q: How many Global Execution Contexts can exist at a time?

Only one. There's always exactly one Global EC per script execution.

Q: What gets stored in memory during the Creation Phase for a var declaration vs a function declaration?

var is stored with the initial value undefined. A function declaration (using the function keyword) is stored with its entire function body, which is why function declarations can be called before they appear in the source code.

Execution Context