How to Track Execution Context in JavaScript

When a script starts, visualize a massive box called the Global Execution Context. Mentally split it into two halves: the Memory Component and the Code Component.

Scan the entire file before running any code. Every time you see a 'var', write it in the Memory Component and assign it the value 'undefined'. Every time you see a function declaration, store the entire function block in memory.

Because you allocated memory in Step 2, you can now understand why accessing a 'var' before its definition returns 'undefined' instead of crashing, and why functions can be called before they appear in the code.

Now transition to the Code Component. Read line 1. If it's an assignment like x = 10, go back to the Memory Component and replace 'undefined' with 10.

When you encounter a function invocation, imagine pushing a brand new box onto a mental Call Stack. This is the Local Execution Context for that specific function.

Perform the exact same Memory Creation and Code Execution phases strictly inside this new Local Context box, using only the function's local variables and arguments.

When the function hits a 'return' statement, mentally destroy the Local Context box, pop it off the Call Stack, and pass the returned value back down to the context below it.