JavaScript Execution Context, Scope Chain, and Hoisting: Understanding How JavaScript Executes Code

Whenever you run a JavaScript program, the JavaScript engine doesn't execute the code line by line immediately. Before execution begins, it creates an environment that stores variables, functions, and other information required to run the program.

This environment is called the Execution Context.

Understanding Execution Context is one of the most important concepts in JavaScript because it explains:

How JavaScript executes code
Why variables can sometimes be used before declaration
How functions access variables
Why closures work
How the Call Stack manages function execution

These concepts are also among the most frequently asked topics in JavaScript interviews.

In this article, we will learn:

What Execution Context is
Types of Execution Context
Execution Context Phases
Global Execution Context
Function Execution Context
Scope
Scope Chain
Hoisting
Temporal Dead Zone (TDZ)
Practical Examples
Interview Questions

What is Execution Context?

Execution Context is the environment in which JavaScript code is executed.

It contains everything required to run the code, including:

Variables
Functions
The value of this
Scope information

Every JavaScript program runs inside an execution context.

Types of Execution Context

JavaScript creates three main types of execution contexts:

1. Global Execution Context

2. Function Execution Context

3. Eval Execution Context

The Eval Execution Context is rarely used because the eval() function is generally discouraged.

Global Execution Context

When a JavaScript file starts executing, the JavaScript engine first creates the Global Execution Context.

Example:

let name = "Rahul";

function greet()
{
    console.log("Hello");
}

Before executing the code, JavaScript creates the Global Execution Context.

There is only one Global Execution Context for each program.

Function Execution Context

Every time a function is called, JavaScript creates a new Function Execution Context.

Example:

function display()
{
    console.log("Welcome");
}

display();

When display() is called, JavaScript creates a new execution context specifically for that function.

Execution Context Lifecycle

Every execution context goes through two phases:

1. Memory Creation Phase

↓

2. Code Execution Phase

Memory Creation Phase

During this phase, JavaScript scans the entire code before executing it.

It allocates memory for:

Variables
Functions

Variables declared with var are initialized with:

undefined

Functions are stored completely in memory.

Example

console.log(a);

var a = 10;

Memory Creation Phase:

a = undefined

Execution Phase:

a = 10

Output:

undefined

Code Execution Phase

During this phase:

Statements execute one by one.
Variables receive their assigned values.
Functions are called.
Expressions are evaluated.

Visual Representation

Execution Context

↓

Memory Creation

↓

Code Execution

Example

var x = 5;

console.log(x);

Memory Phase:

x = undefined

Execution Phase:

x = 5

Output:

Understanding Scope

Scope determines where variables can be accessed.

JavaScript has:

Global Scope
Function Scope
Block Scope

Global Scope

Variables declared outside any function belong to the global scope.

Example:

let country = "India";

function showCountry()
{
    console.log(country);
}

showCountry();

Output:

India

The function can access the global variable.

Function Scope

Variables declared inside a function are accessible only within that function.

Example:

function test()
{
    let message = "Hello";

    console.log(message);
}

test();

Output:

Hello

Trying to access message outside the function results in an error.

Block Scope

Variables declared using let and const inside a block exist only within that block.

Example:

if(true)
{
    let score = 100;

    console.log(score);
}

Output:

Outside the block:

console.log(score);

Output:

ReferenceError

What is Scope Chain?

The Scope Chain is the mechanism JavaScript uses to resolve variable names.

When a variable is used:

JavaScript searches the current scope.
If not found, it searches the parent scope.
The search continues until the global scope.

Example

let city = "Kolkata";

function outer()
{
    let state = "West Bengal";

    function inner()
    {
        console.log(city);

        console.log(state);
    }

    inner();
}

outer();

Output:

Kolkata

West Bengal

The inner() function accesses variables from both the parent scope and the global scope.

Scope Chain Diagram

Global Scope

↓

outer()

↓

inner()

JavaScript searches upward through this chain until the variable is found.

What is Hoisting?

Hoisting is JavaScript's behavior of moving declarations to the top of their scope before execution.

Only declarations are hoisted, not initializations.

Example with var

console.log(a);

var a = 20;

Internally, JavaScript treats it like:

var a;

console.log(a);

a = 20;

Output:

undefined

Hoisting with let

console.log(age);

let age = 20;

Output:

ReferenceError

Unlike var, let variables are not initialized during the memory creation phase.

Hoisting with const

console.log(PI);

const PI = 3.14;

Output:

ReferenceError

const behaves similarly to let.

Function Hoisting

Function declarations are fully hoisted.

Example:

greet();

function greet()
{
    console.log("Hello");
}

Output:

Hello

Function Expression

greet();

var greet = function()
{
    console.log("Hello");
};

Output:

TypeError

Because only the variable declaration is hoisted.

Temporal Dead Zone (TDZ)

The Temporal Dead Zone is the period between entering a block and the actual declaration of a let or const variable.

Example:

console.log(score);

let score = 95;

Output:

ReferenceError

The variable exists but cannot be accessed until its declaration is reached.

Hoisting Comparison

Feature	var	let	const
Hoisted	Yes	Yes	Yes
Initialized	undefined	No	No
TDZ	No	Yes	Yes
Can Redeclare	Yes	No	No

Practical Example

var name = "Rahul";

function display()
{
    console.log(name);
}

display();

Execution Steps:

Global Execution Context created.
Memory allocated.
name initialized.
display() stored.
Function Execution Context created.
Variable searched through the Scope Chain.
Output displayed.

Output:

Rahul

Common Mistakes

Using Variables Before Declaration

Wrong:

console.log(age);

let age = 20;

Confusing var and let

var:

undefined

let:

ReferenceError

Ignoring Scope

Variables declared inside a function cannot be accessed outside it.

Interview Questions