JavaScript Hoisting Explained | var vs let vs const

Have you ever wondered why this JavaScript code works?

console.log(name);

var name = "Ali";

The output is:

undefined

But when you replace var with let:

console.log(name);

let name = "Ali";

You get:

ReferenceError

Why does this happen?

The answer is JavaScript Hoisting.

Hoisting is one of the most commonly asked JavaScript interview topics. It becomes much easier to understand once you know how JavaScript creates an execution environment before running your code.

In this article, we'll understand:

• What hoisting is
• How the creation phase works
• var vs let vs const
• The Temporal Dead Zone (TDZ)
• Function hoisting
• Common interview questions

What Is Hoisting in JavaScript?

Hoisting is the behavior where JavaScript processes declarations before executing the code in their scope.

This means JavaScript knows about certain variables and functions before reaching their declaration during normal top-to-bottom execution.

For example:

console.log(message);

var message = "Hello";

JavaScript effectively treats the declaration as if it were processed before the execution of the console.log():

var message;

console.log(message);

message = "Hello";

Therefore, the result is:

undefined

Important: Hoisting does not literally move your code to the top of the file. It describes how declarations are handled when JavaScript creates the execution environment.

How JavaScript Executes Code

To understand hoisting properly, you need to understand the two broad stages of execution.

For a deeper understanding, read our guide on JavaScript Execution Context.

1. Creation Phase

Before executing the statements, JavaScript creates the necessary execution environment and processes declarations.

For example:

var name = "Ali";

function greet() {
  console.log("Hello");
}

During this stage, JavaScript knows about:

name → undefined
greet → function

The function declaration is available as a function, while the var binding is initialized to undefined.

2. Execution Phase

JavaScript then executes the code according to its normal execution order.

name = "Ali";

greet();

Now:

name → "Ali"

This creation-then-execution model explains many hoisting behaviors.

var Hoisting

Let's start with var.

console.log(age);

var age = 25;

Output:

undefined

Why?

During the setup of the execution environment, the var binding is initialized with undefined.

Conceptually:

var age;

console.log(age);

age = 25;

So JavaScript doesn't throw a ReferenceError here.

var Before Declaration

Consider this:

console.log(a);
console.log(b);

var a = 10;
var b = 20;

Output:

undefined
undefined

Both variables are known before their assignment happens.

let and Hoisting

Now let's look at let.

console.log(age);

let age = 25;

This results in:

ReferenceError

At first, this can seem confusing.

If let wasn't hoisted, why does JavaScript know that age exists?

The important detail is that let declarations are processed when the lexical environment is created, but they are not initialized to undefined in the same way as var.

They remain uninitialized until execution reaches their declaration.

Temporal Dead Zone (TDZ)

The period between entering a scope and reaching the declaration of a let or const variable is called the Temporal Dead Zone.

Example:

console.log(age);

let age = 25;

The TDZ exists here:

┌──────────────────────────────┐
│ Temporal Dead Zone            │
│                              │
│ console.log(age);  ❌        │
│                              │
├──────────────────────────────┤
│ let age = 25;       ✅       │
└──────────────────────────────┘

You cannot access age while it is in the TDZ.

After the declaration executes:

let age = 25;

console.log(age);

Output:

25

const and Hoisting

const behaves similarly to let.

console.log(name);

const name = "Ali";

Result:

ReferenceError

The variable is unavailable during the Temporal Dead Zone.

Once the declaration is reached, the variable is initialized.

const name = "Ali";

console.log(name);

Output:

Ali

var vs let vs const

Here's the important comparison:

The biggest difference related to hoisting is initialization.

A Simple Example

Consider:

console.log(a);
console.log(b);
console.log(c);

var a = 10;
let b = 20;
const c = 30;

What happens?

undefined
ReferenceError

Execution stops when JavaScript tries to access b while it is still in the TDZ.

The var variable has already been initialized with undefined.

Why Does let Throw a ReferenceError?

This is a common interview question.

The answer is:

let is processed before execution, but it remains uninitialized until the declaration is reached. Accessing it before initialization occurs inside the Temporal Dead Zone and results in a ReferenceError.

Function Hoisting

Function declarations are also hoisted.

Consider:

greet();

function greet() {
  console.log("Hello!");
}

Output:

Hello!

The function can be called before its declaration because the function declaration is available when the execution environment is prepared.

Function Declaration vs Function Expression

This is where things get interesting.

Function Declaration

greet();

function greet() {
  console.log("Hello");
}

Works successfully.

Function Expression with var

greet();

var greet = function () {
  console.log("Hello");
};

This results in:

TypeError: greet is not a function

Why?

Conceptually:

var greet;

greet();

greet = function () {
  console.log("Hello");
};

greet is initially undefined, so JavaScript cannot call it as a function.

Function Expression with let

greet();

let greet = function () {
  console.log("Hello");
};

This produces:

ReferenceError

because greet is still inside the Temporal Dead Zone.

Hoisting with var

Let's visualize it:

console.log(x);

var x = 100;

Conceptually:

Creation:
x → undefined

Execution:
console.log(x) → undefined
x = 100

Hoisting with let

console.log(x);

let x = 100;

Conceptually:

Creation:
x → uninitialized

Execution:
console.log(x) → ReferenceError

let x = 100

Hoisting with const

console.log(x);

const x = 100;

Conceptually:

Creation:
x → uninitialized

Execution:
console.log(x) → ReferenceError

const x = 100

Does JavaScript Actually Move Variables to the Top?

No.

This is one of the most common misconceptions about hoisting.

JavaScript does not physically move your declarations to the beginning of the source code.

Instead, the JavaScript engine creates the relevant execution environment and processes declarations before executing the statements.

So this:

console.log(name);

var name = "Ali";

should not be understood as JavaScript literally moving:

var name;

to the top.

It is better to think about it in terms of declaration processing and initialization.

Best Practices

Modern JavaScript development generally favors let and const over var.

Use const by default

const name = "Ali";

Use let when reassignment is required

let count = 0;

count++;

Avoid unnecessary var

var name = "Ali";

Using let and const gives you block scoping and makes accidental access before initialization easier to catch.

Interview Challenge

What will this code output?

console.log(a);

var a = 10;

console.log(b);

let b = 20;

Answer

undefined
ReferenceError

The first variable is var, so it is initialized to undefined.

The second variable is let, so accessing it before its declaration executes causes a ReferenceError.

Another Interview Challenge

What happens here?

sayHello();

function sayHello() {
  console.log("Hello");
}

Answer

Hello

The function declaration is available before normal execution reaches its position.

Key Takeaways

• Hoisting is about how declarations are processed before execution.
• var is initialized to undefined.
• let and const remain uninitialized until execution reaches their declarations.
• let and const have a Temporal Dead Zone.
• Function declarations can be called before their declaration.
• var is function-scoped.
• let and const are block-scoped.
• Modern JavaScript generally prefers const and let over var.

Conclusion

JavaScript hoisting can look confusing at first, especially when comparing var, let, and const.

The easiest way to understand it is to remember one key idea:

JavaScript processes declarations before executing the code, but different declarations are initialized differently.

var is initialized with undefined, while let and const remain uninitialized and are protected by the Temporal Dead Zone.

Once you understand this behavior, many JavaScript concepts that previously seemed mysterious become much easier to understand.