One of the most confusing concepts for JavaScript beginners is Hoisting. Many developers coming from languages like Java, C, or Python often wonder:

• How can a function be called before it is declared?


• Why does JavaScript print undefined instead of throwing an error?


• Why do let and const behave differently from var?

To answer these questions, we need to understand how JavaScript executes code behind the scenes.

What is Hoisting?

Hoisting is JavaScript's behavior of allocating memory for variables and functions before executing the code.

In simple words:

JavaScript scans the entire program first, creates memory for variables and functions, and then starts executing the code line by line.

Because of this, some variables and functions can be accessed before they appear in the source code.

Does JavaScript Actually Move Code?

No.

Nothing physically moves to the top.

Hoisting is simply a conceptual way to explain JavaScript's internal execution process.

JavaScript Execution Phases

JavaScript executes code in two phases:

1. Memory Creation Phase

During this phase:

• Variables declared using var are initialized with undefined.


• Function declarations are stored completely in memory.


• Variables declared using let and const are created but remain inaccessible.

2. Execution Phase

After memory allocation, JavaScript executes statements one by one.

Variable Hoisting with var

Consider:

console.log(x);



var x = 10;

Output

undefined

Many beginners expect:

10

but JavaScript internally behaves as:

var x;



console.log(x);



x = 10;

During memory creation:

x → undefined

During execution:

1. Print undefined
   


2. Assign 10 to x

Why Does It Print Undefined?

Because only the declaration:

var x;

is hoisted.

The assignment:

x = 10;

remains in its original place.

Variable Hoisting with let

console.log(age);



let age = 25;

Output

ReferenceError:

Cannot access 'age' before initialization

Variable Hoisting with const

console.log(pi);



const pi = 3.14;

Output

ReferenceError

What is Temporal Dead Zone (TDZ)?

Variables declared with let and const are hoisted but remain inside a region called the Temporal Dead Zone.

The TDZ starts from the beginning of the scope and ends when the variable is initialized.

Example:

console.log(a);



let a = 10;

Here:

TDZ begins

↓

console.log(a)

↓

ReferenceError

↓

let a = 10

↓

TDZ ends

Function Hoisting

Functions declared using function declarations are completely hoisted.

Example:

greet();



function greet()

{

    console.log("Hello");

}

Output

Hello

Internally:

function greet()

{

    console.log("Hello");

}



greet();

Why Are Functions Fully Hoisted?

JavaScript stores the entire function in memory during the memory creation phase.

Therefore, the function becomes available even before its declaration appears in the code.

Function Expression Hoisting

Consider:

greet();



var greet = function()

{

    console.log("Hello");

};

Output

TypeError: greet is not a function

Internally:

var greet;



greet();



greet = function()

{

    console.log("Hello");

};

At the time of function call:

greet = undefined

Thus:

undefined()

causes an error.

Arrow Function Hoisting

hello();



const hello = () => {

    console.log("Hi");

};

Output

ReferenceError

Since const variables remain inside the Temporal Dead Zone, the function cannot be accessed before initialization.

Hoisting Comparison Table

Hoisting vs Undefined

Many beginners confuse these two terms.

Hoisting

The process of allocating memory before execution.

Undefined

The default value assigned to variables declared using var.

Example:

console.log(num);



var num = 100;

Output:

undefined

because internally:

var num;



console.log(num);



num = 100;

Why Does JavaScript Use Hoisting?

JavaScript separates:

1. Memory allocation


2. Code execution

This design provides flexibility and supports features like recursion and function reuse.

Advantages of Hoisting

1. Allows Function Calls Before Declaration

greet();



function greet()

{

    console.log("Hello");

}

Output:

Hello

2. Supports Recursion

function factorial(n)

{

    if(n === 1)

        return 1;



    return n * factorial(n - 1);

}

Because the function already exists in memory, it can call itself.

3. Improves Code Organization

Example:

main();



function main()

{

    greet();

}



function greet()

{

    console.log("Welcome");

}

Functions can be organized logically without worrying about order.

Should We Rely on Hoisting?

Generally, No.

Although this works:

greet();



function greet()

{

    console.log("Hello");

}

it is better to write:

function greet()

{

    console.log("Hello");

}



greet();

This improves:

• Readability


• Maintainability


• Debugging

Common Interview Questions

Is let hoisted?

Yes.

But it remains inside the Temporal Dead Zone.

Is const hoisted?

Yes.

Like let, it stays in the Temporal Dead Zone.

Are functions hoisted?

Function declarations are completely hoisted.

Are arrow functions hoisted?

No.

Only the variable declaration is hoisted.

Why does var print undefined?

Because var variables are initialized with undefined during memory creation.

Difference Between Hoisting and Undefined

Tips

✔ Declare variables before using them.

✔ Prefer let and const over var.

✔ Do not intentionally depend on hoisting.

✔ Write function declarations before function calls for better readability.

✔ Use meaningful variable names.

Summary

• Hoisting is JavaScript's memory allocation behavior.


• Variables declared with var are initialized with undefined.


• 
  let and const are hoisted but remain inside the Temporal Dead Zone.


• Function declarations are fully hoisted.


• Function expressions and arrow functions are not completely hoisted.


• Hoisting improves flexibility, but relying on it is not recommended.

Reference