How to Understand Hoisting in JavaScript

Hoisting is not about code being physically moved to the top of the file. It is the result of JavaScript's two-phase execution model. During the memory creation phase, the JavaScript engine scans the entire file and allocates memory for all variable and function declarations before executing a single line of code. This is what creates the hoisting behavior.

When the engine encounters a var declaration during the memory creation phase, it allocates memory for that variable and initializes it with the value undefined. This means if you access a var variable before its assignment line, you get undefined instead of a ReferenceError. The declaration is hoisted but the assignment stays in place and only happens during the code execution phase.

Function declarations are fully hoisted. During the memory creation phase, the engine stores the entire function body in memory, not just a placeholder. This is why you can call a function declared with the function keyword before its definition appears in the code. The complete function is available from the very start of execution.

Variables declared with let and const are also hoisted during the memory creation phase, but they are not initialized. They exist in memory in a state called the Temporal Dead Zone from the beginning of their scope until the line where they are declared. Accessing them before their declaration throws a ReferenceError, not undefined. This is safer and more predictable than var behavior.

The Temporal Dead Zone is the region of code between the start of a block scope and the point where a let or const variable is initialized. During this zone, the variable exists in memory but cannot be read or written. Any attempt to access it throws a ReferenceError with a message indicating the variable cannot be accessed before initialization.

A function expression assigns a function to a variable. The variable is hoisted according to its declaration keyword. If declared with var, it is hoisted as undefined. If declared with let or const, it is in the Temporal Dead Zone. In either case, you cannot call the function before the assignment line because only the variable is hoisted, not the function value assigned to it.

Classes are hoisted similarly to let and const. The class name is hoisted to the top of its scope but is not initialized, placing it in the Temporal Dead Zone until the class definition is reached. Trying to instantiate a class before its definition throws a ReferenceError. This is intentional because classes require their extends clause and constructor to be evaluated in order.

To avoid hoisting-related bugs, always declare variables at the top of their scope, always use let and const instead of var, and always define functions before calling them even though declarations are hoisted. These practices make your code behave consistently whether or not you understand hoisting, and they prevent the subtle undefined bugs that var hoisting can cause.