Docs
README
6.1 Execution Context
Introduction
Every time JavaScript runs code, it creates an execution context—an environment where the code is evaluated and executed. Understanding execution contexts is key to understanding scope, hoisting, this, and closures.
What is an Execution Context?
An execution context is a container that holds information about the environment in which code is currently running.
┌────────────────────────────────────────────────────────┐
│ EXECUTION CONTEXT │
├────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ VARIABLE ENVIRONMENT │ │
│ │ • Variable declarations │ │
│ │ • Function declarations │ │
│ │ • Arguments object │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ LEXICAL ENVIRONMENT │ │
│ │ • let/const declarations │ │
│ │ • Outer environment reference │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ THIS BINDING │ │
│ │ • What 'this' refers to │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────┘
Types of Execution Contexts
1. Global Execution Context (GEC)
Created when JavaScript first runs your code.
// Global Execution Context
var globalVar = "I'm global";
let globalLet = 'Also global';
function greet() {
console.log('Hello!');
}
// Everything here is in the Global Execution Context
Characteristics:
- •Only ONE global context per program
- •Creates the global object (
windowin browsers,globalin Node.js) - •Sets
thisto the global object - •Created before any code executes
2. Function Execution Context (FEC)
Created every time a function is called (not declared).
function outer() {
// New Function Execution Context created
var outerVar = 'outer';
function inner() {
// Another new Function Execution Context
var innerVar = 'inner';
}
inner(); // FEC for inner() created here
}
outer(); // FEC for outer() created here
3. Eval Execution Context
Created when code runs inside eval(). (Rarely used, avoid in practice)
eval('var x = 10;'); // Creates its own execution context
Execution Context Lifecycle
Every execution context goes through two phases:
Phase 1: Creation Phase
┌────────────────────────────────────────────────────────┐
│ CREATION PHASE │
├────────────────────────────────────────────────────────┤
│ │
│ 1. Create Variable Object (VO) │
│ └── Scan for function declarations │
│ └── Scan for variable declarations (var) │
│ └── Set up arguments object │
│ │
│ 2. Create Scope Chain │
│ └── Current VO + all parent VOs │
│ │
│ 3. Determine 'this' binding │
│ │
└────────────────────────────────────────────────────────┘
Phase 2: Execution Phase
┌────────────────────────────────────────────────────────┐
│ EXECUTION PHASE │
├────────────────────────────────────────────────────────┤
│ │
│ 1. Assign values to variables │
│ 2. Execute function calls │
│ 3. Execute code line by line │
│ │
└────────────────────────────────────────────────────────┘
Visualizing the Phases
function greet(name) {
var greeting = 'Hello';
var message = greeting + ', ' + name + '!';
return message;
}
greet('Alice');
Creation Phase for greet("Alice"):
┌────────────────────────────────────────────────────────┐
│ FUNCTION EXECUTION CONTEXT - greet("Alice") │
├────────────────────────────────────────────────────────┤
│ Creation Phase: │
│ │
│ arguments: { 0: "Alice", length: 1 } │
│ name: "Alice" │
│ greeting: undefined ← hoisted, not yet assigned │
│ message: undefined ← hoisted, not yet assigned │
│ this: global object (or undefined in strict mode) │
│ │
└────────────────────────────────────────────────────────┘
Execution Phase:
┌────────────────────────────────────────────────────────┐
│ Execution Phase (line by line): │
│ │
│ Line 2: greeting = "Hello" │
│ Line 3: message = "Hello, Alice!" │
│ Line 4: return "Hello, Alice!" │
│ │
└────────────────────────────────────────────────────────┘
The Global Execution Context in Detail
In Browsers:
// Before any code runs, JavaScript creates:
// Global Object
window = {
// Browser APIs
console: {...},
document: {...},
setTimeout: function() {...},
// ... many more
};
// this = window in global scope
console.log(this === window); // true
// Global variables become properties of window
var name = "Alice";
console.log(window.name); // "Alice"
// let and const do NOT become window properties
let age = 25;
console.log(window.age); // undefined
In Node.js:
// Global object is 'global', not 'window'
console.log(global);
// But 'this' at module level is NOT global
console.log(this === global); // false
console.log(this); // {} (module.exports)
// var declarations are NOT added to global
var name = 'Alice';
console.log(global.name); // undefined
Multiple Execution Contexts
var name = 'Global';
function first() {
var name = 'First';
second();
console.log(name); // "First"
}
function second() {
var name = 'Second';
console.log(name); // "Second"
}
first();
console.log(name); // "Global"
Execution Flow:
┌────────────────────────────────────────────────────────┐
│ 1. Global Execution Context Created │
│ └── name = "Global" │
│ └── first = function │
│ └── second = function │
│ │
│ 2. first() called → FEC for first() created │
│ └── name = "First" │
│ └── Calls second() │
│ │
│ 3. second() called → FEC for second() created │
│ └── name = "Second" │
│ └── Logs "Second" │
│ └── second() FEC destroyed │
│ │
│ 4. Back to first() │
│ └── Logs "First" │
│ └── first() FEC destroyed │
│ │
│ 5. Back to Global │
│ └── Logs "Global" │
│ │
└────────────────────────────────────────────────────────┘
Variable Environment vs Lexical Environment
var (Variable Environment)
function example() {
console.log(x); // undefined (hoisted)
var x = 10;
console.log(x); // 10
}
let/const (Lexical Environment)
function example() {
// console.log(y); // ReferenceError: Cannot access before initialization
let y = 20;
console.log(y); // 20
}
The Temporal Dead Zone (TDZ):
┌────────────────────────────────────────────────────────┐
│ function example() { │
│ // TDZ for 'y' starts here │
│ // │
│ // console.log(y); ← ReferenceError │
│ // │
│ let y = 20; // TDZ ends here │
│ console.log(y); // 20 │
│ } │
└────────────────────────────────────────────────────────┘
Scope Chain in Execution Context
Each execution context has a reference to its outer (parent) environment:
var a = 10;
function outer() {
var b = 20;
function inner() {
var c = 30;
console.log(a + b + c); // 60
}
inner();
}
outer();
Scope Chain:
┌────────────────────────────────────────────────────────┐
│ SCOPE CHAIN │
├────────────────────────────────────────────────────────┤
│ │
│ inner() EC │
│ └── c = 30 │
│ └── Outer Reference → outer() EC │
│ │ │
│ ▼ │
│ outer() EC │
│ └── b = 20 │
│ └── inner = function │
│ └── Outer Reference → Global EC │
│ │ │
│ ▼ │
│ Global EC │
│ └── a = 10 │
│ └── outer = function │
│ └── Outer Reference → null │
│ │
└────────────────────────────────────────────────────────┘
this Binding in Execution Context
this is determined when the execution context is created:
// Global context: this = global object
console.log(this); // window (browser) or global (Node)
const obj = {
name: 'Object',
method: function () {
// Method context: this = obj
console.log(this.name); // "Object"
},
arrow: () => {
// Arrow function: this = lexical (outer) this
console.log(this); // window/global
},
};
obj.method(); // "Object"
obj.arrow(); // window/global
Summary
| Concept | Description |
|---|---|
| Execution Context | Environment where code runs |
| Global EC | Created first, one per program |
| Function EC | Created on each function call |
| Creation Phase | Sets up variables, scope, this |
| Execution Phase | Runs code line by line |
| Variable Environment | Holds var declarations |
| Lexical Environment | Holds let/const, scope chain |
| Scope Chain | Links to outer environments |
Next Steps
In the next section, we'll explore the Call Stack—how JavaScript keeps track of all these execution contexts.