JavaScript Hoisting Explained: A Beginner’s Guide with Examples

Learn JavaScript hoisting in simple terms. This beginner’s guide explains how var, let, and const behave, with clear examples of variable and function hoisting.

Introduction

When you start learning JavaScript, you may notice that variables and functions sometimes behave in unexpected ways. This is because of a feature called hoisting. Hoisting is one of those topics that confuses beginners, but once you understand it, your code will make much more sense.

In simple terms, hoisting is JavaScript’s default behavior of moving variable and function declarations to the top of their scope before code execution.

What You’ll Learn

By the end of this guide, you’ll understand:

• What hoisting means in JavaScript.
• How hoisting works with variables.
• The difference between var, let ', andconst` in relation to hoisting.
• How function declarations and expressions behave with hoisting.
• Common mistakes beginners make with hoisting and how to avoid them.

What Is Hoisting in JavaScript?

Hoisting is the process by which JavaScript moves all declarations (not assignments) to the top of the current scope during the compile phase.

This means you can use variables and functions before you declare them, but with some important rules.

Hoisting with Variables

Using var

When you use var, the variable is hoisted but automatically initialized as undefined.

console.log(myVar); // Output: undefined
var myVar = 100;

Here’s what happens internally:

var myVar; // Declaration is hoisted
console.log(myVar); // undefined
myVar = 100; // Assignment happens later


Using let and const

Variables declared with let and const are also hoisted, but they are placed in a temporal dead zone (TDZ) until their actual line of declaration is reached. Accessing them before declaration causes an error.

console.log(myLet); // ReferenceError
let myLet = 10;

Hoisting with Functions

Function Declarations

Function declarations are fully hoisted. This means you can call the function before its definition is complete.

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

Function Expressions

Function expressions (whether using var, let, or const) behave differently. Only the variable name is hoisted, not the function itself.

sayHi(); // TypeError: sayHi is not a function
var sayHi = function() {
console.log("Hi!");
};

Common Mistakes with Hoisting

Beginners often make these mistakes:

1. Assuming assignments are hoisted: Only declarations are hoisted, not values.
2. Confusing var with let/const: var initializes with undefined, while let and const Throw errors if used before declaration.
3. Misusing function expressions: Unlike function declarations, expressions are not fully hoisted.

Conclusion

Hoisting in JavaScript may feel tricky at first, but it simply means that declarations are processed before execution. Variables declared with var get hoisted and initialized as undefined, while let and const are hoisted but stay in a temporal dead zone until their declaration. Functions declared with the function keyword are fully hoisted, but function expressions are not.

By understanding these rules, you’ll avoid common errors and write cleaner, more predictable code. Practice with small examples, and soon hoisting will feel natural as you continue your JavaScript journey.

You can reach out to me via LinkedIn