All topics
2 / 100
Fundamentalsbeginner

Hoisting Explained

Why function and variable declarations appear to be 'moved' to the top of their scope before code runs.

Before running a scope, the engine processes its declarations. That is why you can call a function written below the call.

It's like a conference program printed in advance: every speaker's name is listed at the top (hoisted), but if you show up to a talk before the actual speaker arrives, the room is empty (temporal dead zone) rather than having no name on the schedule at all.

Key Concepts

1
Function declarations are fully hoisted.
    sayHi();                      // "hi" -- works
    function sayHi() { console.log("hi"); }
2
The name and the body are both available from the top of the scope.
3
Function expressions are not.
    greet();                      // TypeError: greet is not a function
    var greet = function () {};
4
    hello();                      // ReferenceError -- TDZ
    const hello = () => {};
5
An expression follows its variable's rules. var greet is hoisted as undefined, so calling it is calling undefined. const hello is in the temporal dead zone, so reading it throws.
var greetundefinedconst hello
6
Which is the distinction the question is really about. Not "is it hoisted" — everything is. What differs is what the name holds before the line runs.
7
    function declaration  the function
    var                   undefined
    let / const           nothing; reading throws
8
The worked example interviewers use.
    console.log(typeof f);   // "function"
    console.log(typeof v);   // "undefined"
    console.log(typeof l);   // ReferenceError
9
    function f() {}
    var v = 1;
    let l = 2;
10
Note that typeof does not protect you from the temporal dead zone, which surprises people — it returns "undefined" for a name that was never declared at all, and throws for one declared later with let.
typeof"undefined"let
11
Declarations beat assignments.
    var a = 1;
    function a() {}
    console.log(typeof a);   // "number"
12
The function declaration is hoisted first, then the assignment a = 1 runs. So the final value is the number.
a = 1
13
What to do with this. Very little, deliberately. Relying on hoisting makes code harder to read, and every style guide says declare before use.
14
Its value is diagnostic: when a name is undefined where you expected a function, hoisting is usually why.
undefined
15
What the interviewer is probing.1. "What exactly is hoisted?" Probing: precision. Stalls: "Variables move to the top." Moves up: declarations are registered before execution; var initialises to undefined, function declarations are fully available, and let and const stay in the temporal dead zone.
16
2. "Why does calling a function expression before its line fail?" Probing: declaration versus expression. Stalls: "It should work." Moves up: only the variable is hoisted, so it holds undefined at that point and calling it throws TypeError.
17
3. "If a var and a function share a name, which wins?" Probing: the precedence rule. Stalls: "The last one written." Moves up: the function declaration takes precedence during hoisting, though a later assignment overwrites it at runtime.
18
4. "How does hoisting interact with blocks?" Probing: scoping. Stalls: "It is the same." Moves up: var is function-scoped so it escapes a block; let and const are block-scoped and do not.
Use cases:hoistingscopefundamentals