JavaScript Hoisting

Hoisting is JavaScript’s default behavior of moving declarations to the top of their scope. This can lead to unexpected results if not understood clearly. Let's explore how it works for variables and functions.

Common uses of hoisting include:

Calling functions early: Use function declarations before they’re defined.
Grouping variables: Keep var declarations at the top of a scope for better organization.
Setting default values: Assign values only if the variable is still undefined.
Avoiding errors with var: Access variables before they’re assigned without crashing the program.
Debugging TDZ issues: Understand why let and const throw errors when used too early.
Understanding function expressions: Know why they can't be called before they’re defined.

What is Hoisting?

Hoisting is a JavaScript feature where variable and function declarations are moved to the top of their scope before the code runs. This means you can sometimes use variables or functions before you write them in your code.

For example:

javascript

console.log(x); // undefined
var x = 5;

console.log(x); // undefined
var x = 5;

Even though x is declared after the console.log, JavaScript doesn't crash. That's because the var x line is "hoisted" to the top. But only the declaration moves — not the value 5.

🧠 Behind the scenes, JavaScript treats your code like this:

javascript

var x;
console.log(x); // undefined
x = 5;

var x;
console.log(x); // undefined
x = 5;

So, hoisting doesn’t mean the code moves — it means JavaScript quietly sets up your declarations first before running the rest of your code.

Hoisting with var, let, and const

In JavaScript, hoisting works differently depending on how you declare variables.

var variables are hoisted and initialized with undefined. You can use them before declaration, but their value will be undefined until assigned.
let and const are hoisted but not initialized. They stay in a “temporal dead zone” until declared, and using them early throws a ReferenceError.

Example:

javascript

console.log(a); // undefined (var is hoisted and initialized)
var a = 5;

console.log(b); // ReferenceError (let is hoisted but not initialized)
let b = 10;

console.log(c); // ReferenceError (const is hoisted but not initialized)
const c = 15;

console.log(a); // undefined (var is hoisted and initialized)
var a = 5;

console.log(b); // ReferenceError (let is hoisted but not initialized)
let b = 10;

console.log(c); // ReferenceError (const is hoisted but not initialized)
const c = 15;

🧠 Use let and const to prevent using variables before declaration and avoid bugs.

Function Hoisting

In JavaScript, function declarations are hoisted completely. This means you can call a function before you define it in the code.

Function declarations (using function keyword) are hoisted with their entire body.
You can call them anywhere in the scope, even before the function appears in the code.
However, function expressions (functions assigned to variables) are treated like variables: only the variable declaration is hoisted, not the function assignment.

Example:

javascript

// Function declaration hoisting
sayHello();

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

// Function expression hoisting
sayBye(); // TypeError: sayBye is not a function

var sayBye = function() {
  console.log("Bye!");
};

// Function declaration hoisting
sayHello();

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

// Function expression hoisting
sayBye(); // TypeError: sayBye is not a function

var sayBye = function() {
  console.log("Bye!");
};

🧠 Remember, only function declarations are fully hoisted. Function expressions behave like variables.

Summary

var is hoisted and initialized as undefined.
let and const are hoisted but not initialized — TDZ applies.
Function declarations are hoisted completely.
Function expressions are not hoisted with their assigned value.

🧠 Hoisting helps JavaScript parse code flexibly, but can lead to confusing bugs if misunderstood.

Frequently Asked Questions

What is hoisting in JavaScript?

Hoisting is a JavaScript behavior where declarations for variables and functions are moved to the top of their scope during the compilation phase, before the code is executed.

Are variables declared with var hoisted?

Yes, variables declared with var are hoisted and initialized with undefined. You can reference them before their declaration, but they will be undefined until assigned a value.

Why do let and const throw errors when used before declaration?

Variables declared with let and const are hoisted but not initialized. They exist in a Temporal Dead Zone (TDZ) from the start of the block until the declaration line, and accessing them before declaration causes a ReferenceError.

Can I call a function before it is declared in JavaScript?

Yes, if the function is declared using the function declaration syntax. These are fully hoisted. However, function expressions are not hoisted with their value, only the variable name is.

What is the Temporal Dead Zone (TDZ)?

The Temporal Dead Zone (TDZ) refers to the time between entering a block scope and when a let or const variable is declared. During the TDZ, accessing the variable causes a ReferenceError.

🚀 What's Next?

Up next, you'll explore higher-order functions in JavaScript. These are special functions that can take other functions as arguments or return them as results. They’re a powerful part of JavaScript that help you write cleaner, more flexible code. Don’t worry if that sounds tricky — we’ll break it down step by step!