JavaScript Function Invocation and the Call Stack

JavaScript Function Invocation and the Call Stack

When you invoke a function in JS, several things happen in a precise order. Understanding the sequence explains variable resolution, the this keyword, and async timing.

Step 1: Invocation

A function is invoked by appending () to a reference, or via call/apply/bind. Arrow functions and regular functions both follow the same call stack rules.

Step 2: Create the Execution Context

The engine creates a new function execution context with:

• A variable environment for locals.
• An outer environment reference (lexically determined at write time).
• A this binding (determined at call time).

Step 3: Memory Allocation Phase

The engine scans the function body. var locals get undefined. Inner function declarations are stored in full. let and const are placed in the Temporal Dead Zone.

Step 4: Push onto the Call Stack

A new frame is pushed on top of the stack. The frame contains the arguments object, local variables, and the return address.

Step 5: Code Execution Phase

The engine runs the body line-by-line. Variables are assigned, nested functions are invoked (recursively pushing new frames), and async operations are scheduled.

Step 6: Return and Pop

When the function hits a return statement or reaches the end, the frame is popped. The return value (or undefined) is passed to the caller. Local variables are destroyed unless captured by a closure.

Async Wrinkle

If the function schedules async work (a setTimeout callback), the callback is a separate function invocation. Its execution context is created later, when the event loop pushes it onto the (then-empty) call stack.

The Takeaway

Invocation creates an execution context, runs the memory phase, pushes a frame onto the call stack, executes the body, then pops the frame on return. Async callbacks are separate invocations that happen later, when the stack is free.