JavaScript Hoisting Explained: Avoid Common Mistakes

Introduction

Have you ever used a variable in JavaScript before declaring it and wondered why the code didn’t break?

That behavior is caused by JavaScript hoisting.

Hoisting is one of the most confusing concepts for beginners, but once you understand how it works, JavaScript starts to make much more sense.

What Is JavaScript Hoisting?

Hoisting is JavaScript’s default behavior of moving declarations to the top of their scope before code execution.

Important:

• Declarations are hoisted
• Assignments are not hoisted

Think of hoisting as JavaScript saying:

“I know this variable or function exists before running the code.”

Hoisting with var

Example

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

What Happens

JavaScript treats the code like this:

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

Output:

undefined

✔ No error, but the value is undefined.

Hoisting with let and const

Variables declared with let and const are hoisted, but they are not accessible before declaration.

Example

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

❌ This causes an error:

ReferenceError: Cannot access 'age' before initialization

This happens because of the Temporal Dead Zone (TDZ).

Temporal Dead Zone (TDZ)

The TDZ is the time between:

• When the variable is hoisted
• And when it is declared

During this time, accessing the variable causes an error.

✔ This makes code safer and avoids bugs.

Function Hoisting

Function Declarations

Function declarations are fully hoisted.

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

✔ Works perfectly.

Function Expressions

Function expressions are not hoisted like declarations.

sayHi();
var sayHi = function () {
console.log("Hi!");
};

❌ Error:

TypeError: sayHi is not a function

Hoisting Summary Table

Common Beginner Mistakes

• Thinking hoisting moves code physically
• Using var unintentionally
• Calling function expressions too early
• Ignoring TDZ errors

Best Practices

• Prefer let and const over var
• Declare variables at the top of their scope
• Define functions before using them
• Write clear, predictable code

Conclusion

JavaScript hoisting explains why variables and functions sometimes work before they are declared. Understanding how var, let, const, and functions behave with hoisting will help you avoid bugs and write cleaner JavaScript.

At Developer Hint we simplify JavaScript concepts so beginners can understand how things work behind the scenes and build confidence step by step.

Advertisements