Hoisting is JavaScript declaration processing before execution. The practical debug value is mapping symptoms: undefined reads, early callable function declarations, and ReferenceError or TypeError when the wrong construct is used.
Use this JavaScript interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.
Explain 'hoisting' in JavaScriptFrontend interview answer
This JavaScript interview question tests whether you can explain JavaScript Hoisting: undefined reads, early calls, and debug traps, connect it to production trade-offs, and handle common follow-up questions.
- JavaScript Hoisting: undefined reads, early calls, and debug traps explanation without falling back to memorized docs wording
- Hoisting and Scope reasoning, edge cases, and production failure modes
- How you would answer the most likely JavaScript interview follow-up
Big-picture definition
Hoisting is not code movement. It is how the engine prepares scope before running the script, registering declarations first. That under-the-hood setup explains several debug traps: var reads as undefined, function declarations work early, and function expressions or classes fail for different reasons.
Construct | Hoisted behavior |
|---|---|
| Declaration hoisted, value starts as undefined. |
| Declaration hoisted but inaccessible until declaration line (TDZ). |
Function declaration | Fully available before its line. |
Function expression / arrow assigned to variable | Follows variable rules; not callable early in safe way. |
Class declaration | Hoisted but in TDZ like let/const. |
run(); // works
function run() {}
console.log(a); // undefined
var a = 1;
speak(); // TypeError: speak is not a function
var speak = function () {};
// new Runner(); // ReferenceError
class Runner {}
Practical debugging signal
Error/behavior | Likely cause |
|---|---|
Reads as undefined before declaration |
|
ReferenceError before declaration | TDZ with |
TypeError: fn is not a function before declaration | Function expression assigned later; variable exists but callable value not ready. |
High-signal follow-up
- Function declarations are callable early because the function value is ready during setup.
- A
varfunction expression hoists only the variable, so the read happens before the callable value exists. classbehaves like lexical declarations and stays in TDZ.
Frontend debugging example
A feature module may call a helper before its function expression is assigned, or instantiate a class before its declaration line. Those failures look similar at first, but they come from different hoisting outcomes.
Interview tip
Lead with: "Hoisting registers declarations early; the key difference is what is initialized and when." Then show one var + one let example.
Before the show starts, the stage crew places props (declarations). Some props are usable immediately, others are covered until the right scene (execution line).
- Hoisting is declaration setup before execution.
- It affects variables, functions, and classes differently.
- Understanding initialization timing is what prevents subtle bugs.
Use this as one explanation rep, then continue with the JavaScript interview questions cluster or a guided prep path.