Execution Context

To truly understand how JavaScript works, you must understand how it executes code internally.

The execution context is the environment in which JavaScript code is evaluated and executed.

What Is an Execution Context?

An execution context is a container that holds information about:

• Variables
• Functions
• The value of this

Whenever JavaScript runs code, it creates an execution context.

Types of Execution Contexts

JavaScript has three main types:

• Global Execution Context
• Function Execution Context
• Eval Execution Context (rarely used)

Global Execution Context

This is created when the JavaScript program starts.

• Only one global context exists
• Global variables are created here
• this refers to the global object

In browsers, the global object is window.

Function Execution Context

Every time a function is called, a new execution context is created.

Each function execution context has:

• Its own variables
• Its own scope
• Its own this value

Execution Context Lifecycle

Each execution context goes through two phases:

• Creation Phase
• Execution Phase

Creation Phase

During this phase:

• Memory is allocated
• Variables are set to undefined
• Function declarations are stored
• this is determined

This phase explains hoisting.

Execution Phase

During execution:

• Code runs line by line
• Variables get actual values
• Functions are executed

Example Breakdown

var x = 10;

function add(a, b) {
  var result = a + b;
  return result;
}

add(2, 3);
  

Execution steps:

• Global context is created
• x is allocated memory
• add() is stored
• Function context is created when add() is called
• Function variables are initialized and executed

Execution Context Stack

JavaScript manages execution contexts using a stack called the call stack.

• Contexts are pushed when functions are called
• Contexts are popped after execution

This ties directly to the event loop you learned earlier.

Why Execution Context Matters

Understanding execution context helps you:

• Understand hoisting
• Understand scope
• Debug complex bugs
• Read advanced JavaScript code

Common Beginner Confusions

• Mixing up scope and execution context
• Not understanding hoisting behavior
• Misinterpreting this

Execution context explains all of these.

Thumb Rules

• Execution context defines where code runs
• Each function call creates a new context
• Creation phase happens before execution
• Call stack manages execution order

What Comes Next?

Now that you understand execution context, the next step is applying advanced JavaScript patterns used in real applications.

In the next lesson, we will explore advanced patterns.