How JavaScript Creates Execution Context for Functions

How JavaScript Creates Execution Context for Functions

Each time you invoke a function, the engine creates a brand new execution context for that call. Understanding this is key to understanding closures, scope, and the this keyword.

The Two Phases (Again)

1. Memory Allocation Phase: scan the function body, allocate memory for local var variables (set to undefined), function declarations (stored in full), and place let/const in the TDZ.
2. Code Execution Phase: run the body line-by-line, assign values, call nested functions.

What the Context Contains

• Variable Environment: local var, let, const, and inner function declarations.
• Outer Environment Reference: a pointer to the parent's environment. This builds the scope chain.
• Value of this: determined by how the function was invoked.

Where the Context Lives

Each new function execution context is pushed onto the call stack as a frame. When the function returns, the frame (and the context) is destroyed. Local variables vanish unless captured by a closure.

Example

function outer() {
  var x = 10;
  function inner() {
    console.log(x);
  }
  inner();
}
outer();

1. outer() creates a context. x is undefined, then 10. inner is stored in full.
2. During execution, inner() is called. Its context is created and pushed on top.
3. inner looks up x. It is not in its own variable environment, so it follows the outer environment reference (to outer's context) and finds 10.
4. inner returns, frame popped.
5. outer returns, frame popped.

Why This Matters for Closures

If outer returns inner instead of calling it, inner keeps a reference to outer's variable environment even after outer's frame is popped. That is a closure.

The Takeaway

Every function call creates a new execution context with a variable environment, an outer reference, and a this value. It is pushed on the call stack and destroyed on return. The outer reference is what makes scope chains and closures work.