Hoisting
A behavior in JavaScript where variable and function declarations are moved to the top of their containing scope during the compilation phase.
Detailed Explanation
While it looks like code is moved, hoisting is actually a result of how the JavaScript engine parses the script before executing it. Function declarations are fully hoisted, meaning you can call a function before it's defined in the code. Variables declared with `var` are hoisted but initialized as `undefined`. Variables declared with `let` and `const` are also hoisted but enter a 'Temporal Dead Zone', leading to an error if accessed before declaration.
Quick Summary
Hoisting describes how JavaScript pre-registers function and variable declarations at the top of their scope before running any code. It is why a function declaration can be called above its definition and why `var` reads as undefined before its assignment.
Key Takeaways
- Function declarations are fully hoisted, you can call them anywhere in the scope.
- var declarations are hoisted but initialised to undefined, so reading them early returns undefined, not a ReferenceError.
- let and const are hoisted but live in the Temporal Dead Zone (TDZ) until their declaration line, reading them early throws.
- Function expressions and arrow functions are not hoisted as callable; only the variable binding is.
- Class declarations are also in the TDZ until their declaration line.
When to use it
- Reading legacy code that relies on hoisted function declarations for top-down readability.
- Explaining a ReferenceError that looks like it should be undefined, TDZ from let/const is the cause.
- Understanding why a `typeof` check on an undeclared var returns 'undefined' but the same on a TDZ binding throws.
- Setting up module-level helpers as function declarations so they can be referenced before being defined.
Common Mistakes
- Assuming `let` is not hoisted at all, it is, but the TDZ makes early access throw.
- Using `var` and relying on accidental hoisting that breaks when the code is refactored into a block.
- Calling a function expression before it is assigned and being confused by the resulting TypeError.
- Believing the engine literally moves code, it does not; it pre-scans declarations during the creation phase of an execution context.
Hoisting, Frequently Asked
Are let and const hoisted?
Yes, but they are not initialised. They exist in the Temporal Dead Zone from the start of the block until the declaration is reached, and any access during that window throws a ReferenceError.
Does hoisting work across files?
No. Each module or script has its own top-level scope, and hoisting only applies within a single scope. Imports follow their own resolution model.
Should I rely on hoisting?
For function declarations, yes, they make code easier to read top-down. For variables, no, always declare before use to avoid TDZ surprises and to keep the intent of the code obvious.