Javascript Revision

Understanding Hoisting in JavaScript in Simple Terms

One of the most confusing concepts for beginners in JavaScript is hoisting. At first, it feels strange because variables and functions sometimes seem to work before they are declared.

But once you understand the idea behind it, hoisting becomes much easier.

What is Hoisting?

Think of hoisting like a classroom setup.

Before the teacher starts teaching, the school already prepares:

• the attendance sheet
• the seating arrangement
• the list of student names

Even before students speak, their names are already registered.

JavaScript behaves in a similar way.

Before executing your code, JavaScript scans the file and registers:

• variables
• functions

This preparation process is called hoisting.

Hoisting with var

Let’s look at a simple example:

console.log(name);
var name = "John";

Output

undefined

At first glance, this looks confusing.

You may wonder:

“How does name exist before it is declared?”

This happens because JavaScript already noticed the variable during the hoisting phase.

Internally, JavaScript treats the code like this:

var name;
console.log(name);
name = "John";

Important Concept

JavaScript hoists:

• Variable declarations

But it does not hoist:

• Variable assignments

That means the variable exists early, but its value is assigned later.

Another example explaining the above concept

console.log(a);
var a = 10;

Output

undefined

Internally, JavaScript sees it as:

var a;
console.log(a);
a = 10;

So the variable exists, but its value hasn’t been assigned yet.

Real-Life Analogy

Imagine ordering food at a restaurant.

Step 1:

Your order gets registered.

Step 2:

The food arrives later.

Before the food arrives:

• your order exists
• but the actual food is not ready yet

That’s exactly how var behaves.

The variable exists, but the value is still missing, so JavaScript returns:

undefined

Hoisting with let

Now let’s see how let behaves.

console.log(age);
let age = 25;

Output

ReferenceError

Unlike var, modern JavaScript is stricter.

Instead of silently returning undefined, it throws an error saying:

“You are trying to use the variable too early.”

This protected phase is called the:

Temporal Dead Zone (TDZ)

The variable exists in memory, but JavaScript blocks access to it until the declaration line is reached.

Hoisting with Functions

Functions behave differently.

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

Output

Hello

This works because JavaScript hoists the entire function definition before execution starts.

So the function is fully available even before its declaration appears in the code.

Easy Memory Trick

var

Think of it as:

An empty box prepared early.

The box exists, but nothing is inside yet.

Result:

undefined

let and const

Think of them as:

A locked box.

The box exists, but JavaScript does not allow access until the declaration line.

Result:

ReferenceError

Quick Summary

Best Practice

Even though JavaScript supports hoisting, it is always better to declare variables before using them.

Good Practice:

let score = 100;
console.log(score);

This keeps your code:

• clean
• predictable
• easier to debug

………………….

Final Thoughts

Hoisting is JavaScript’s way of preparing variables and functions before execution begins.

Understanding:

• how var behaves
• why let and const throw errors
• and what the Temporal Dead Zone means

will help you write safer and more predictable JavaScript code.

Once you understand hoisting, many “weird” JavaScript behaviors start making perfect sense.