Understanding JavaScript Pre‑compilation and Hoisting

Example One

In the first example a variable is referenced before it is assigned, yet the interpreter does not throw an error; it outputs undefined because the variable declaration is hoisted to the top of the scope during the pre‑compilation phase.

Declaration Hoisting consists of two parts: variable declaration hoisting and function declaration hoisting. Variable declaration hoisting moves the declaration to the top of its scope, creating a binding with the name (e.g., a ) but leaving it uninitialized. Function declaration hoisting moves the entire function body to the top, allowing the function to be called before its textual definition.

Declaration Hoisting

The interpreter lifts variable and function declarations so that they exist before any code runs, which is why referencing a variable before its assignment yields undefined rather than a runtime error.

Example Two

The second example demonstrates the order of operations inside a function during pre‑compilation. By calling fn , three values are output: the function object itself, the number 2 , and another 2 . This illustrates how parameters, arguments, and inner function declarations are processed.

Underlying Operations in Pre‑compilation

Within a function, pre‑compilation performs four main steps:

1. Create the Activation Object (AO) for the function's execution context. 2. Locate parameters and variable declarations, adding them to AO with the value undefined . 3. Bind actual arguments to the corresponding parameters. 4. Locate function declarations inside the body and add the function objects to AO.

In the global scope, the steps are simpler:

1. Create the Global Object (GO). 2. Add variable names as properties of GO with the value undefined . 3. Add function declarations as properties of GO with their full function bodies.

Example Three

The third example shows the order in which a function looks for a variable. When a variable named global is not found inside the function, the engine searches the global scope, resulting in the first output being undefined and the second being 200 . Removing a specific line changes the first output to 100 , demonstrating the impact of hoisting on variable resolution.

Summary

Through these cases, readers learn the core concepts of JavaScript pre‑compilation: variable and function declaration hoisting, the creation of activation and global objects, and the distinction that let and const declarations, while hoisted, reside in a temporal dead zone (TDZ) and cannot be accessed before initialization. Understanding these mechanisms enables developers to write more predictable code, improve readability, and avoid subtle bugs related to identifier resolution.