Understanding JavaScript Variable Objects: From Creation to Execution

In JavaScript we inevitably declare variables and functions, but how does the engine locate them? Understanding the execution context is essential.

Creation Phase

During this phase the execution context creates a Variable Object, builds the scope chain, and determines the value of this.

Code Execution Phase

After creation, the code runs, variable assignments and function references are resolved.

Variable Object (Variable Object)

The Variable Object is built through three steps:

Establish the arguments object, mapping parameters to properties.

Process function declarations: each function name becomes a property whose value is a reference to the function. If a property already exists, it is overwritten.

Process variable declarations: each var creates a property with the value undefined. Existing properties are left unchanged to avoid overwriting functions.

These rules make variable hoisting easy to explain in interviews. Function declarations have slightly higher priority than var declarations.

Example

Consider the function test() called in the global scope. Its execution context is created, then the Variable Object becomes an Activation Object during the execution phase, allowing its properties to be accessed.

Before the execution phase, properties in the Variable Object are inaccessible; after entering the execution phase, the Variable Object turns into an Activation Object, and its properties become reachable.

Another example reinforces the concept.

Understanding how the Variable Object changes from creation to execution solidifies mastery of JavaScript’s execution context.

Global Context Variable Object

In browsers the global object is window. The global execution context’s Variable Object is the window object, and this also points to window.

The global context lives as long as the program runs; closing the browser ends it. All other contexts can directly access the global context’s properties.