var vs let vs const Hoisting in JavaScript

var vs let vs const Hoisting in JavaScript

All three declarations are hoisted in JavaScript, meaning memory is allocated for them before code execution. But they behave very differently.

var: Hoisted and Initialized to undefined

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

The declaration is hoisted, the variable is initialized to undefined, and the assignment happens at the line. No error, just undefined until the line runs.

let and const: Hoisted but Uninitialized (TDZ)

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 10;

Memory is allocated for y, but the variable stays in the Temporal Dead Zone until the declaration line. Accessing it before that line throws a ReferenceError.

Why the Difference?

var is from pre-ES6 JavaScript. let and const were introduced in ES6 to prevent bugs caused by accessing variables too early. The TDZ is a safety feature: it forces you to declare before use.

const Has an Extra Rule

const must be initialized at the declaration line:

const z;    // SyntaxError: Missing initializer
const z = 5; // OK

And it cannot be reassigned after:

const z = 5;
z = 10; // TypeError: Assignment to constant variable

Note: const does not make objects immutable. You can still mutate properties of a const object.

Block Scope vs Function Scope

• var is function-scoped (or global if declared outside a function).
• let and const are block-scoped (a block is anything inside {}).

if (true) {
  var a = 1;
  let b = 2;
}
console.log(a); // 1
console.log(b); // ReferenceError

Re-declaration

• var allows re-declaration in the same scope (silent, buggy).
• let and const throw a SyntaxError on re-declaration in the same scope.

The Takeaway

All three are hoisted, but var is initialized to undefined while let and const sit in the TDZ. Use const by default, let when you need to reassign, and avoid var in modern code.