Tracing JavaScript Code Execution With the Call Stack

Tracing JavaScript Code Execution With the Call Stack

The best way to understand the call stack is to trace a real example. Let us walk through one step by step.

The Code

function add(a, b) {
  return a + b;
}
function average(x, y) {
  const sum = add(x, y);
  return sum / 2;
}
function main() {
  const result = average(10, 20);
  console.log("Average:", result);
}
main();

Step 1: Program Loads

• The engine parses the file and creates the Global Execution Context (GEC).
• Memory phase: add, average, main are stored in full. result is undefined.
• Stack: [GEC].

Step 2: main() is Invoked

• A new execution context for main is created and pushed.
• result is still undefined inside main's local scope.
• Stack: [GEC, main].

Step 3: average(10, 20) is Invoked

• A new context for average is pushed.
• sum is undefined in this context.
• Stack: [GEC, main, average].

Step 4: add(10, 20) is Invoked

• A new context for add is pushed.
• Stack: [GEC, main, average, add].

Step 5: add Returns 30

• add returns 30, its frame is popped.
• The return value is assigned to sum in average.
• Stack: [GEC, main, average].

Step 6: average Returns 15

• average computes 30 / 2 = 15 and returns.
• The return value is assigned to result in main.
• Stack: [GEC, main].

Step 7: main Logs and Returns

• console.log("Average:", 15) runs.
• main returns, frame popped.
• Stack: [GEC].

Why This Matters in Interviews

Interviewers love asking you to predict the stack at a given moment. Trace through:

1. Which function is currently running (the top frame).
2. What local variables exist in each frame.
3. What the next statement will be after each return.
4. What the return value is.

This same skill explains stack traces when debugging errors.

The Takeaway

Tracing the call stack means walking through invocations (push frames) and returns (pop frames) in order. At any moment, the top of the stack is the running function. This skill is essential for debugging and for interviews.