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.