Frontend interview answer

Explain 'hoisting' in JavaScript

HighIntermediateJavascript

By FrontendAtlas Team · Updated Apr 8, 2026

Interview quick answer

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.

Interview focus

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 definitions
Hoisting and Scope reasoning, edge cases, and production failure modes
How you would answer the most likely JavaScript interview follow-up

Practice more JavaScript interview questions

Interview answer drill

Use this JavaScript interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.

Practice more JavaScript interview questions Follow JavaScript mastery study plan Open Essential 60

Full interview answer

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
`var`	Declaration hoisted, value starts as undefined.
`let`/`const`	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.

Hoisting is one concept with different outcomes by syntax type.

JAVASCRIPT

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	`var` hoisting + assignment not executed yet.
ReferenceError before declaration	TDZ with `let`/`const`/`class`.
TypeError: fn is not a function before declaration	Function expression assigned later; variable exists but callable value not ready.

Map symptom to hoisting category quickly.

High-signal follow-up

Function declarations are callable early because the function value is ready during setup.
A var function expression hoists only the variable, so the read happens before the callable value exists.
class behaves 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.

Still so complicated?

Before the show starts, the stage crew places props (declarations). Some props are usable immediately, others are covered until the right scene (execution line).

Summary

Hoisting is declaration setup before execution.
It affects variables, functions, and classes differently.
Understanding initialization timing is what prevents subtle bugs.