What is JavaScript Hoisting and How It Works
Explore what JavaScript hoisting means, how it affects variables and functions, and practical tips to avoid surprises. Clear explanations, examples, and best practices from JavaScripting.
JavaScript hoisting is a behavior where declarations of variables and functions are moved to the top of their containing scope during compilation, making them accessible before their explicit declaration.
What Hoisting Really Is
Hoisting is a behavior in JavaScript where declarations are conceptually moved to the top of their containing scope during the compile phase. This means you can reference variables and functions before their physical appearance in the code, but the exact behavior depends on what is being declared and how it is declared. In practice, the engine scans your script, notes where variables and function definitions begin, and then runs the code in a predictable order. The key takeaway is that hoisting affects declarations, not the runtime values assigned later.
According to JavaScripting, hoisting is a foundational concept that shapes how JavaScript executes, and understanding it helps you predict runtime behavior rather than assuming a strict top-to-bottom run. It interacts with scope rules—whether you are inside a function, a block, or a module—and with the distinction between declarations and initializations. Hoisting does not magically reorder your code; it explains why certain identifiers seem available before they appear on the screen. When you internalize this idea, you can write code that behaves consistently across browsers and environments. This awareness also improves debugging, because many surprises trace back to how the compiler handles declarations.
Questions & Answers
What is hoisting in JavaScript?
Hoisting in JavaScript is the behavior where declarations are moved to the top of their scope during compilation. This means identifiers can be used before they appear in code, but only the declarations, not initializations.
Hoisting lets declarations be usable before they appear, but the exact result depends on the type of declaration.
What gets hoisted in JS?
Only declarations are moved, not initializations. Var declarations are hoisted to the top of their scope and initialized as undefined, while function declarations are fully hoisted. Let and const declarations are hoisted but not initialized, causing a temporal dead zone.
Declarations move, and the exact result depends on the type of declaration.
Do let or const get hoisted?
Yes, but they are placed in the temporal dead zone until initialization, so accessing them before declaration throws a ReferenceError.
Let and const are hoisted but not initialized, so you cannot use them before the line where you declare them.
Do function expressions hoist?
No. Only function declarations are hoisted; function expressions assigned to variables are not hoisted as functions. If called before the assignment you get an error.
Function expressions are not hoisted as functions.
How do modules affect hoisting?
In modules, hoisting behaves with module scope; top level code executes in order, and declarations are hoisted within the module. Clear ordering and explicit definitions help readability in modular code.
Modules have their own scope and ordering rules.
How can I avoid hoisting surprises?
Declare variables with let or const and define functions before use. Keep code linear, use linting, and test edge cases to ensure consistent behavior across environments.
To avoid surprises, declare early and keep code predictable.
What to Remember
- Declare variables with let or const to avoid hoisting surprises
- Know that var declarations are hoisted and initialized as undefined
- Function declarations are hoisted; function expressions are not
- Use explicit function order or define functions before use
- Test code in strict mode to catch TDZ issues