What Is Hoisting in JavaScript?

What Is Hoisting in JavaScript?

Hoisting is the behavior where JavaScript makes variables and functions available before their declaration line in the code. It is one of the most famous interview topics.

What Actually Happens

Hoisting is not the engine physically moving code. It is a side effect of the memory allocation phase of execution context creation.

When the engine enters a new execution context, it scans the code and allocates memory for all declarations before running any line:

• var variables: memory allocated, value set to undefined.
• Function declarations: memory allocated, entire function body stored.
• let and const: memory allocated, but placed in the Temporal Dead Zone (uninitialized).

Variables Hoisted With undefined

console.log(x); // undefined
var x = 5;
console.log(x); // 5

x is not a ReferenceError because memory was reserved. But the assignment x = 5 only runs during the code execution phase. So before that line, x is undefined.

Function Declarations Hoisted With Body

foo(); // "hello"
function foo() {
  console.log("hello");
}

The whole function is stored in memory, so calling it before the declaration works.

Function Expressions Are Not Hoisted the Same Way

bar(); // TypeError: bar is not a function
var bar = function () {
  console.log("hello");
};

bar is a var variable, hoisted with undefined. Calling undefined() throws a TypeError.

let and const Are Hoisted Differently

They are hoisted (memory is allocated) but not initialized. Accessing them before the declaration line throws a ReferenceError because they are in the Temporal Dead Zone.

console.log(y); // ReferenceError
let y = 5;

The Takeaway

Hoisting is a side effect of the memory allocation phase. var variables are hoisted with undefined, function declarations with their full body, and let/const are hoisted but kept uninitialized in the TDZ. Understanding this prevents bugs and answers interview questions.