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

Type	Hoisted	Usable Before Declaration
`var`	Yes	Yes (undefined)
`let`	Yes	No
`const`	Yes	No
Function declaration	Yes	Yes
Function expression	Partial	No

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.

Discover more from Developer Hint

Subscribe to get the latest posts sent to your email.

  Content Disclosure This content was created with the assistance of AI tools and thoroughly reviewed, fact-checked, and refined by a human editor to ensure accuracy, clarity, and usefulness for readers.

JavaScript VS Code Web Development