Global Execution Context vs Function Execution Context

Global Execution Context vs Function Execution Context

JavaScript creates execution contexts for code to run in. The two main types are global and function. They look similar but behave differently.

Global Execution Context (GEC)

• Created once when the script starts.
• There is exactly one GEC per program.
• In browsers, this points to the window object.
• Variables declared with var at the top level become properties of window.
• Stays alive until the program (or the browser tab) is closed.

Function Execution Context (FEC)

• Created every time a function is invoked.
• One per function call. Recursive calls create nested FECs.
• this depends on how the function was called: regular call, method call, call/apply/bind, or arrow function.
• Variables declared with var are local. They do not leak to the global object.
• Destroyed when the function returns.

How They Interact

Every FEC is pushed onto the call stack. The GEC sits at the bottom of the stack. Each function call pushes a new frame; each return pops one. When the GEC is the only frame left, the program is idle (waiting for events).

Example

var a = 1;            // lives in GEC
function outer() {
  var b = 2;          // lives in outer's FEC
  function inner() {
    var c = 3;        // lives in inner's FEC
    console.log(a + b + c); // 6, via scope chain
  }
  inner();
}
outer();

At the moment inner runs, the stack from bottom to top is: GEC, outer, inner.

The Takeaway

The GEC is created once, holds global vars and this = window. An FEC is created per function call, holds local vars, and is destroyed on return. The call stack tracks which context is currently running.