JavaScript can sometimes behave in ways that seem surprising.

You write a variable declaration after using the variable, yet the program doesn’t always throw an error. You call a function before its declaration, and it works perfectly. Then you try the same thing with let or const, and suddenly JavaScript gives you a ReferenceError.

What is happening?

The answer is JavaScript hoisting.

Hoisting is one of the fundamental concepts behind JavaScript’s execution model. Understanding it can help you write cleaner code, debug unexpected behavior, and perform better in JavaScript interviews.

In this guide, you’ll learn:

• What JavaScript hoisting is
• How hoisting works
• var hoisting
• let and const hoisting
• The Temporal Dead Zone
• Function hoisting
• Function expressions and arrow functions
• Class hoisting
• Hoisting and scope
• Common hoisting mistakes
• Best practices for modern JavaScript

---

What Is Hoisting in JavaScript?

JavaScript hoisting is the behavior where declarations are processed before the code in their execution context is executed.

A common way to visualize it is:

┌───────────────────────────────────┐
│          JavaScript Code          │
└─────────────────┬─────────────────┘
                  ↓
┌───────────────────────────────────┐
│       Execution Context           │
│            Created                │
└─────────────────┬─────────────────┘
                  ↓
┌───────────────────────────────────┐
│          Declarations             │
│           Processed               │
└─────────────────┬─────────────────┘
                  ↓
┌───────────────────────────────────┐
│          Code Executes            │
│         Line by Line              │
└───────────────────────────────────┘

This is why some declarations appear to be available before their position in the source code.

However, there is an important clarification:

💡 Hoisting does not literally mean JavaScript moves your code to the top of the file.
It is a simplified way of describing how JavaScript handles declarations during execution-context creation.

---

A Simple JavaScript Hoisting Example

Consider this code:

console.log(name);

var name = "John";

You might expect JavaScript to throw an error because name is used before it is declared.

But the result is:

undefined

Why?

Because the var declaration is processed before execution, while the assignment happens later.

A simplified mental model is:

var name;

console.log(name);

name = "John";

Notice the difference:

Declaration
    ↓
var name;

Assignment
    ↓
name = "John";

The declaration is available early, but the value isn’t assigned until execution reaches that line.

---

How Does JavaScript Hoisting Work?

To understand how JavaScript hoisting works, it’s useful to understand execution contexts.

Whenever JavaScript executes code, it creates an execution context.

For example, when a JavaScript program starts:

┌─────────────────────────────┐
│       Global Context        │
├─────────────────────────────┤
│ Variables                   │
│ Functions                   │
│ Scope Information           │
└──────────────┬──────────────┘
               ↓
        Code Execution

When a function is called, JavaScript creates another execution context:

Global Execution Context
          │
          ↓
      function call
          │
          ↓
Function Execution Context
          │
          ↓
    Function executes

Each execution context has its own environment for managing variables, functions, and scope.

---

var Hoisting Explained

The var keyword is the classic example used to explain JavaScript hoisting.

Consider:

console.log(age);

var age = 25;

The output is:

undefined

A simplified version of what happens is:

var age;

console.log(age);

age = 25;

Why does this happen?

The declaration:

var age;

is processed before the console.log() statement executes.

However, the assignment:

age = 25;

doesn’t happen until JavaScript reaches that line.

Visualizing var Hoisting

┌──────────────────────┐
│     var age          │
└──────────┬───────────┘
           ↓
┌──────────────────────┐
│ Initialized as       │
│     undefined        │
└──────────┬───────────┘
           ↓
┌──────────────────────┐
│ console.log(age)     │
│       ↓              │
│    undefined         │
└──────────┬───────────┘
           ↓
┌──────────────────────┐
│     age = 25         │
└──────────────────────┘

---

Declaration vs Assignment

One of the easiest ways to understand hoisting is to separate declaration from assignment.

Consider:

var username = "Alex";

This contains two operations:

var username;       // Declaration

username = "Alex";  // Assignment

Hoisting mainly affects the declaration.

The assignment happens during normal code execution.

This distinction explains why:

console.log(username);

var username = "Alex";

produces:

undefined

rather than:

Alex

The variable exists, but the assignment hasn’t happened yet.

---

let Hoisting in JavaScript

Now let’s look at let.

Consider:

console.log(username);

let username = "Alex";

This does not produce:

undefined

Instead, JavaScript throws:

ReferenceError

This often leads beginners to believe that let isn’t hoisted.

That’s not the complete explanation.

let declarations are processed when the execution context is created, but the variable cannot be accessed before its initialization.

This is where the Temporal Dead Zone comes in.

---

const Hoisting in JavaScript

const behaves similarly to let.

Consider:

console.log(country);

const country = "India";

The result is:

ReferenceError

The const declaration exists within the scope, but it cannot be accessed before initialization.

---

var vs let vs const

Here’s the easiest way to compare their behavior:

Feature	var	let	const
Declaration processed before execution	✅	✅	✅
Initialized with undefined	✅	❌	❌
Access before initialization	undefined	❌ Error	❌ Error
Temporal Dead Zone	❌	✅	✅
Block scoped	❌	✅	✅
Function scoped	✅	❌	❌
Can be reassigned	✅	✅	❌

The key difference

                 Hoisting
                    │
          ┌─────────┴─────────┐
          ↓                   ↓
        `var`            `let` / `const`
          │                   │
          ↓                   ↓
    Initialized           Uninitialized
    as undefined                │
          │                     ↓
          ↓              Temporal Dead Zone
     Can access                 │
          │                     ↓
          ↓              ReferenceError
      undefined

---

What Is the Temporal Dead Zone?

The Temporal Dead Zone (TDZ) is the period between entering a scope and initializing a let or const variable.

Consider:

{
    console.log(name);

    let name = "John";
}

The variable name is known within the scope, but it cannot be accessed before its initialization.

Therefore:

ReferenceError

is thrown.

Temporal Dead Zone Visualization

┌──────────────────────────────┐
│       Block Scope Starts     │
└──────────────┬───────────────┘
               ↓
┌──────────────────────────────┐
│    Temporal Dead Zone        │
│                              │
│    `name` exists but cannot  │
│    be accessed yet           │
└──────────────┬───────────────┘
               ↓
┌──────────────────────────────┐
│       let name = "John"      │
└──────────────┬───────────────┘
               ↓
┌──────────────────────────────┐
│       Variable Initialized   │
│                              │
│       `name` is usable       │
└──────────────────────────────┘

Why does JavaScript use the TDZ?

The TDZ helps prevent accidental access to variables before they are properly initialized.

This makes let and const behavior more predictable than var.

---

Function Hoisting in JavaScript

Functions are another important part of hoisting.

Function declarations can generally be called before they appear in your source code.

For example:

sayHello();

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

Output:

Hello, JavaScript!

This works because the function declaration is available when the execution context is prepared.

Function Hoisting Visualization

┌──────────────────────────────┐
│      Function Declaration    │
│                              │
│      function sayHello()     │
└──────────────┬───────────────┘
               ↓
        Function Available
               ↓
┌──────────────────────────────┐
│        sayHello()            │
│             ↓                │
│      "Hello, JavaScript!"    │
└──────────────────────────────┘

---

Function Declaration vs Function Expression

This is an important distinction.

Function Declaration

greet();

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

This works.

---

Function Expression

Now consider:

greet();

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

This doesn’t work as a normal function call.

A simplified mental model is:

var greet;

greet();

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

At the moment greet() executes, greet is undefined.

The result is:

TypeError

Comparison

Function Type	Hoisting Behavior
Function declaration	Function is available before declaration
Function expression with var	Variable is undefined before assignment
Function expression with let	TDZ applies
Function expression with const	TDZ applies
Arrow function with let/const	TDZ applies

---

Arrow Function Hoisting

Arrow functions are function expressions.

Consider:

sayHello();

const sayHello = () => {
    console.log("Hello!");
};

This produces:

ReferenceError

Why?

Because sayHello is declared using const and cannot be accessed before initialization.

The correct approach is:

const sayHello = () => {
    console.log("Hello!");
};

sayHello();

---

Class Hoisting in JavaScript

JavaScript classes also cannot be accessed before their declaration.

For example:

const user = new User();

class User {
    constructor() {
        this.name = "John";
    }
}

This results in:

ReferenceError

A class declaration is processed during environment creation, but it isn’t available for use before its declaration is evaluated.

This behavior is similar to let and const.

---

Hoisting and JavaScript Scope

Hoisting becomes even more interesting when combined with scope.

JavaScript has several types of scope, including:

• Global scope
• Function scope
• Block scope
• Module scope

The biggest difference developers should remember is:

var
 ↓
Function Scope

let / const
 ↓
Block Scope

---

Example: var Is Function Scoped

Consider:

function example() {
    var message = "Hello";
}

console.log(message);

The result is:

ReferenceError

The variable exists only inside the function.

---

Example: let Is Block Scoped

Now consider:

if (true) {
    let message = "Hello";
}

console.log(message);

Again:

ReferenceError

But this time, the reason is block scope.

The variable exists only inside the { } block.

---

Hoisting Inside a Function

Consider this example:

var message = "Global";

function showMessage() {
    console.log(message);

    var message = "Local";
}

showMessage();

What do you think the output will be?

Many developers expect:

Global

But the actual result is:

undefined

Why?

Because the local message declaration is hoisted inside the function.

A simplified version is:

var message = "Global";

function showMessage() {
    var message;

    console.log(message);

    message = "Local";
}

The local variable shadows the global variable.

Scope Visualization

┌──────────────────────────────┐
│        Global Scope          │
│                              │
│ message = "Global"           │
│                              │
│   ┌──────────────────────┐   │
│   │   Function Scope     │   │
│   │                      │   │
│   │ var message          │   │
│   │      ↓               │   │
│   │ undefined            │   │
│   └──────────────────────┘   │
└──────────────────────────────┘

The local variable takes precedence over the global variable.

---

Why Does JavaScript Have Hoisting?

Hoisting is a consequence of how JavaScript creates execution environments and bindings before executing statements.

This allows JavaScript to:

• Register variable bindings
• Register function declarations
• Establish scope
• Prepare the environment for execution
• Resolve identifiers during execution

It is not simply a feature designed to let developers write declarations after their usage.

Understanding this distinction is important.

---

Common JavaScript Hoisting Mistakes

1. Using var Before Assignment

console.log(total);

var total = 500;

Although this works and prints:

undefined

it can make code confusing.

Better:

const total = 500;

console.log(total);

---

2. Assuming let Behaves Like var

This:

console.log(age);

let age = 25;

doesn’t return:

undefined

It throws:

ReferenceError

---

3. Calling an Arrow Function Before Initialization

start();

const start = () => {
    console.log("Starting...");
};

This produces:

ReferenceError

Better:

const start = () => {
    console.log("Starting...");
};

start();

---

4. Confusing Declaration With Initialization

Consider:

var price = 100;

Think of it as:

Declaration
     ↓
var price;

Initialization / Assignment
     ↓
price = 100;

Hoisting affects the declaration, but the assignment happens during execution.

---

Best Practices for Modern JavaScript

Understanding hoisting is useful, but you shouldn’t rely on hoisting to structure your application.

Modern JavaScript development generally follows a few simple practices.

Use const by Default

If you don’t need to reassign a variable, use const.

const username = "John";

Use let When Reassignment Is Required

let count = 0;

count++;

Avoid var in New Code

var is still valid JavaScript, but let and const provide block scope and more predictable behavior.

Declare Before Use

Even when JavaScript allows something to work because of hoisting, declaring variables and functions before using them can make code easier to read.

For example:

const calculateTotal = (price, tax) => {
    return price + tax;
};

const total = calculateTotal(100, 18);

console.log(total);

This is easier to understand than relying on declaration order behavior.

---

JavaScript Hoisting Cheat Sheet

Here’s a quick reference you can save:

JavaScript Feature	Hoisted	Initialized Early	Access Before Declaration
var	✅	undefined	✅ undefined
let	✅	❌	❌ ReferenceError
const	✅	❌	❌ ReferenceError
Function declaration	✅	Function	✅
Function expression	Variable-dependent	Variable-dependent	Usually ❌
Arrow function	Variable-dependent	Variable-dependent	Usually ❌
Class declaration	✅	❌	❌ ReferenceError

---

JavaScript Hoisting: The Mental Model

If you’re preparing for a JavaScript interview or trying to understand the language more deeply, remember this simple model:

                    JAVASCRIPT HOISTING
                           │
            ┌──────────────┴──────────────┐
            │                             │
          Variables                    Functions
            │                             │
      ┌─────┴─────┐                 ┌─────┴─────┐
      ↓           ↓                 ↓           ↓
    `var`     `let` / `const`   Declaration  Expression
      │           │                 │           │
      ↓           ↓                 ↓           ↓
 `undefined`    TDZ             Available    Depends on
      │           │             early        variable
      ↓           ↓
   Access     ReferenceError

This isn’t the full JavaScript specification, but it’s a useful mental model for everyday development.

---

Frequently Asked Questions

What is hoisting in JavaScript?

JavaScript hoisting describes how declarations are processed during execution-context creation before normal statement execution begins.

Are let and const hoisted?

Yes. Their declarations are processed, but they remain uninitialized until execution reaches their declaration. Accessing them before initialization causes a ReferenceError.

Why does var return undefined?

A var binding is initialized with undefined before its assignment is executed.

Are JavaScript functions hoisted?

Function declarations are available before their position in the source code. Function expressions and arrow functions follow the initialization behavior of the variables they are assigned to.

What is the Temporal Dead Zone?

The Temporal Dead Zone is the period where a let or const variable exists in its scope but cannot be accessed because it has not yet been initialized.

Should I use var in modern JavaScript?

For new JavaScript code, const and let are generally preferred because they provide block scope and reduce several common problems associated with var.

Does hoisting move JavaScript code to the top?

No. “Moving declarations to the top” is only a simplified mental model. JavaScript does not literally rearrange your source code.

---

Final Thoughts

JavaScript hoisting becomes much easier to understand once you separate three ideas:

Declaration
     +
Initialization
     +
Execution

The most important differences are:

`var`
 ↓
Hoisted + initialized as undefined

`let`
 ↓
Hoisted + uninitialized + TDZ

`const`
 ↓
Hoisted + uninitialized + TDZ

Function declaration
 ↓
Available before declaration

Function expression / arrow function
 ↓
Depends on variable initialization

The biggest takeaway is that hoisting doesn’t mean every variable can be safely used before its declaration.

var, let, const, functions, and classes all have different behaviors.

Once you understand these differences, concepts such as JavaScript scope, execution context, Temporal Dead Zone, function declarations, closures, and the JavaScript event loop become much easier to learn.

For modern JavaScript development, prefer const and let, declare values before using them, and treat hoisting as something to understand—not something your code should depend on.