JavaScript Execution Context Explained: How JavaScript Works Behind the Scenes

Whenever you run a JavaScript program, the engine doesn't execute your code line by line immediately.

Instead, JavaScript first creates an Execution Context, prepares memory for variables and functions, and then starts executing the code.

Understanding the Execution Context is the key to mastering concepts like hoisting, scope, closures, and the Event Loop.

Let's explore how JavaScript works behind the scenes.

What Is an Execution Context?

An Execution Context is the environment in which JavaScript code is evaluated and executed.

It contains everything JavaScript needs to run your code:

• Variables
• Functions
• The value of this
• Scope information

Think of it as a workspace where JavaScript prepares everything before executing your code.

Types of Execution Context

JavaScript has three types of Execution Contexts:

1. Global Execution Context (GEC)

The Global Execution Context is created once when your JavaScript program starts.

Example:

console.log("Hello World");

Even this simple statement runs inside the Global Execution Context.

The Global Execution Context creates:

• Global Object (window in browsers)
• this
• Global Variables
• Global Functions

2. Function Execution Context (FEC)

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

Example:

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

greet();

When greet() executes:

• A new Local Execution Context is created.
• Memory is allocated.
• The function runs.
• The context is destroyed after execution.

3. Eval Execution Context

Created only when using the eval() function.

eval("console.log('Hello')");

In modern JavaScript, eval() is rarely used and generally discouraged.

Phases of an Execution Context

Every Execution Context goes through two phases.

Phase 1: Memory Creation Phase

Before executing any code, JavaScript scans the entire program.

During this phase:

• Variables are allocated memory.
• Function declarations are stored completely.
• Variables declared with var are initialized as undefined.
• Variables declared with let and const remain uninitialized (Temporal Dead Zone).

Example:

console.log(a);

var a = 10;

During the Memory Creation Phase:

a → undefined

Phase 2: Execution Phase

Now JavaScript starts executing the code line by line.

Example:

var a = 10;

console.log(a);

Execution:

a = 10

console.log(10)

Output:

10

Memory Creation Example

var a = 5;

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

console.log(a);

greet();

During the Memory Creation Phase:

a → undefined

greet → Entire Function

After the Execution Phase:

a → 5

Function executes

Output:

5

Hello

Function Execution Context

Consider this example:

function one() {
  console.log("One");
}

function two() {
  one();
  console.log("Two");
}

two();

Execution Order:

Global Context

↓

two()

↓

one()

↓

console.log("One")

↓

one() removed

↓

console.log("Two")

↓

two() removed

↓

Global Context ends

Execution Context and the Call Stack

Execution Contexts are managed using the Call Stack.

Example:

function first() {
  second();
}

function second() {
  third();
}

function third() {
  console.log("Done");
}

first();

Stack:

Call Stack

Global

↓

first()

↓

second()

↓

third()

↓

console.log()

↓

third removed

↓

second removed

↓

first removed

↓

Global

The Call Stack always follows the Last In, First Out (LIFO) principle.

Hoisting and Execution Context

Execution Context is the reason hoisting exists.

Example:

console.log(message);

var message = "Hello";

Output:

undefined

Why?

Because during the Memory Creation Phase:

message → undefined

Then later:

message = "Hello"

What About let and const?

console.log(age);

let age = 25;

Output:

ReferenceError

Unlike var, let and const stay in the Temporal Dead Zone (TDZ) until their declaration is executed.

Visual Representation

            JavaScript Engine

                   │

      Creates Global Execution Context

                   │

      ┌─────────────────────────────┐
      │ Memory Creation Phase       │
      │                             │
      │ Variables → undefined       │
      │ Functions → Stored          │
      └─────────────────────────────┘

                   │

                   ▼

      ┌─────────────────────────────┐
      │ Execution Phase             │
      │                             │
      │ Code executes line by line  │
      └─────────────────────────────┘

Common Mistakes

❌ Thinking JavaScript executes code immediately.

❌ Believing variables are created only when their line executes.

❌ Confusing Hoisting with Execution Context.

❌ Forgetting that every function call creates a new Execution Context.

Interview Tip

If an interviewer asks:

What is an Execution Context?

A strong answer is:

An Execution Context is the environment where JavaScript executes code. Every context has two phases: the Memory Creation Phase, where variables and functions are prepared, and the Execution Phase, where code runs line by line. JavaScript creates a Global Execution Context once and a new Function Execution Context for every function call.

Key Takeaways

• Every JavaScript program starts with a Global Execution Context.

• Every function call creates a new Function Execution Context.

• Execution Context has two phases:

  • Memory Creation Phase
  • Execution Phase

• Hoisting happens during the Memory Creation Phase.

• Function declarations are fully hoisted.

• The Call Stack manages Execution Contexts.

Conclusion

Execution Context is one of the most fundamental concepts in JavaScript. Once you understand how JavaScript prepares memory, creates execution environments, and manages function calls, concepts like hoisting, closures, and the Event Loop become much easier to understand.

If you're preparing for JavaScript interviews, mastering Execution Context is essential because it's the foundation of how JavaScript works behind the scenes.