Understanding Execution Context in JavaScript

If you’ve ever wondered how JavaScript actually runs your code behind the scenes, the answer starts with a single, powerful concept — the Execution Context.

It’s the invisible space where JavaScript code is evaluated and executed. Whether you’re declaring a variable, calling a function, or returning a value — everything happens inside an execution context.

Let’s break this down clearly.

What Happens When You Run a JavaScript File?

Take this small example:

var n = 2;
function square(num) {
  var ans = num * num;
  return ans;
}

var square2 = square(n);
var square4 = square(4);

The moment you run this code, JavaScript creates a Global Execution Context (GEC). This is the very first environment your program runs in — everything starts here.

Global Execution Context (GEC)

The GEC has two main parts:

1. Memory Component (Variable Environment) – where all variables and functions are stored as key-value pairs.
2. Code Component (Thread of Execution) – where your actual code is executed line by line.

But before execution begins, the GEC itself is created in two distinct phases.

Phase 1: Memory Creation Phase

In this phase, JavaScript scans the entire code and sets up memory for all variables and functions.

• For variables, JavaScript reserves space and sets their value to undefined.
• For functions, it stores the entire function definition in memory.

So after this phase, our memory looks something like this:

Nothing has been executed yet — memory is just prepared.

Phase 2: Code Execution Phase

Once memory is allocated, JavaScript now executes the code line by line.

1. var n = 2; → The value 2 replaces undefined for n.

2. function square(num){…} → Function definitions are skipped (they’re already in memory).

3. var square2 = square(n); → A function is called, which triggers something new.

Function Execution Context (FEC)

Whenever a function is invoked, JavaScript creates a brand-new Execution Context for that function.

So when square(n) runs, a new Function Execution Context (FEC) is created. Just like the global one, this too has two parts — Memory Phase and Code Phase.

Memory Creation Phase (inside square):

Code Execution Phase (inside square):

1. The argument n (which is 2) is passed, so num = 2.
2. ans = num * num → ans = 4.
3. return ans → The function returns 4.

At this point, the FEC finishes execution and is deleted from memory, returning control to the global context.

The returned value (4) is stored in square2.

The same process repeats for square(4) → returning 16 for square 4.

Call Stack — Managing All Contexts

You might wonder, how does JavaScript keep track of all these nested contexts? That’s where the Call Stack comes in.

Think of it like a stack of books:

• When a new function is called → a new Execution Context is pushed onto the stack.
• When the function completes → its context is popped off the stack.

At any given time, the top of the stack is the function currently being executed.

Different names you might see for the same concept:

• Execution Context Stack
• Control Stack
• Runtime Stack, etc.

Once the last line of the program executes, the Global Execution Context itself is popped off — and that’s when your program ends.

Quick Recap

• Every JavaScript file starts with a Global Execution Context.
• Execution Contexts are created in two phases — Memory Creation Phase and Code Execution Phase.
• In the Memory Creation Phase, JavaScript skims through the entire code and allocates memory for variables and functions.
• In the Code Execution Phase, JavaScript runs the code line by line, assigns values to variables, and executes functions.
• Each function call creates its own Execution Context.
• JavaScript manages all these contexts using the Call Stack.
• Once a function finishes execution, its Execution Context is deleted and popped out of the Call Stack.
• When the last line of the program is executed, the Global Execution Context is deleted too.

Why This Matters

Understanding Execution Context is the foundation for:

• Hoisting
• Scope & Closures
• The Event Loop
• Async behavior

We’ll dive into each of these in upcoming articles — but it all starts here. Once you master this concept, the rest of JavaScript’s runtime behavior starts making a lot more sense.

Mini-Quiz

1. What are the two components of an Execution Context?
2. What does JavaScript store in memory during the Memory Creation Phase?
3. What happens when a function returns a value?
4. What data structure manages Execution Contexts?
5. When does the Global Execution Context get deleted?
6. Try to dry run the following program and then execute the same on your machine. Hint: Consider the phases in which the execution context is created and variables are initialized.

console.log(n) 

function sq(n) { 
    return n * n; 
} 

console.log(sq(n)); 

var n = 2; 

console.log(2, sq(n));

Next in the series: Hoisting in JavaScript

A message from our Founder

Hey, Sunil here. I wanted to take a moment to thank you for reading until the end and for being a part of this community.

Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? We don’t receive any funding, we do this to support the community. ❤️

If you want to show some love, please take a moment to follow me on LinkedIn, TikTok, **Instagram. You can also subscribe to our [weekly newsletter](https://newsletter.plainenglish.io/)**.

And before you go, don’t forget to clap and follow the writer️!