LinkedIn Hook

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.

In this lesson you'll learn what an Execution Context actually contains, the difference between the Creation Phase and the Execution Phase, and how the JS engine sets up memory before the first line runs.

If you've ever been stumped by "what happens before var name = 'Rakibul' executes?" — this lesson fixes that forever.

Read the full lesson -> [link]

#JavaScript #InterviewPrep #ExecutionContext #JSEngine #Frontend #CodingInterview #WebDevelopment

Execution Context thumbnail

What You'll Learn

What an Execution Context is and the 3 types JavaScript creates
The two phases every Execution Context goes through — Creation and Execution
How memory is allocated for var, let, const, and function declarations before any code runs

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: { name: undefined, greet: fn() }

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

    // === CREATION PHASE (greet Context) ===
    // memory: { message: undefined }

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

// greet's context is DESTROYED after it finishes

Execution Context visual 1

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: What are the two phases of an Execution Context?

Creation Phase (memory allocation — var becomes undefined, let/const go into 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.

Quick Reference — Cheat Sheet

EXECUTION CONTEXT — QUICK MAP

Types:
  - GEC (Global)     -> created once, holds window/global + this
  - FEC (Function)   -> created per call, holds args + locals + this
  - Eval             -> avoid in production

Two Phases (always in this order):
  1. CREATION
     var        -> undefined
     let/const  -> uninitialized (TDZ)
     function   -> full body stored
  2. EXECUTION
     assignments run
     functions get called -> new FEC pushed
     FEC destroyed on return

Previous: None (first lesson) Next: Call Stack -> The Plate-Stack Model

This is Lesson 1.1 of the JavaScript Interview Prep Course — 14 chapters, 87 lessons.

Execution Context