Stop 04 · JavaScriptTopics · 26/36

Execution Context

In short

Every time JavaScript runs code, it first sets up a workspace called an execution context. Get this one idea and hoisting, scope and this start fitting together.

The environment (variables, scope chain, `this`) in which JavaScript code is evaluated and run — every function call creates a new one. Execution contexts explain how JavaScript establishes variable bindings, scope chains, and `this` for the global program and individual function calls.

The jaadu mascot sets up a wedding buffet table with empty pots and plates.

Think of it like this

The caterers set up first

At a wedding, caterers set up the counter before guests arrive: plates out, name cards on the dishes, but the pots still empty. Then the food is served. JavaScript does the same: a setup phase reserves memory, then an execution phase runs your code.

Watch it happen

Contexts for plan(3)

push(global context)

global context

Top of the stack is coloured

1/4Setup: city is undefined, plan is stored whole. Then it runs and sets city to "Indore".

The big ideas

What you need to know

Global context first

When your script starts, JavaScript creates one global execution context for the top-level code.

A new one per function call

Every function call gets its own fresh context with its own parameters and local variables.

Two phases

Creation phase sets up variables, functions and this. Execution phase runs the lines and assigns values.

What's inside

Its variables, a link to the outer scope (for the scope chain) and the value of this.

See it in code

Walk through the code

1var city = "Indore";2 3function plan(days) {4  var budget = days * 2000;5  return city + ", " + days + " days, ₹" + budget;6}7 8console.log(plan(3));   // "Indore, 3 days, ₹6000"9 10// 1. Global context: city = undefined, plan = full function11// 2. Runs: city = "Indore"12// 3. plan(3) gets its own context: days = 3, budget = undefined13// 4. budget = 6000, the string is returned, the context is discarded

1/4A global variable. In the creation phase it starts as undefined.

plan can read city because its context links to the outer one. Each call to plan would get a brand new context with its own budget.

Save yourself the pain

Common mistakes

Oops

Thinking all calls to a function share the same local variables.

Do this instead

Every call creates a new context. Locals from one call don't leak into the next (closures aside).

Oops

Treating execution context and scope as the same thing.

Do this instead

Scope is decided by where code is written. A context is created when code runs, and it uses that scope.

Your mission

Trace it on paper

~15 min

Quick check

Your script calls the same function 3 times. Counting the global one, how many execution contexts are created in total?

Go deeper

1Trace through a small script and note when each execution context is created. Validate your understanding by applying it in a small practical example.
2Learn the difference between the global execution context and function execution contexts. Focus on understanding the underlying reason it works, not only memorizing the definition.
3Understand the two phases of context creation: creation and execution.

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download