Hoisting | Dataplexa

Hoisting

Sometimes JavaScript behaves in a way that feels unexpected. Code seems to work even when things are written out of order.

This behavior is called hoisting. Understanding hoisting helps you avoid confusion and bugs.

What Is Hoisting?

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

Only declarations are hoisted, not actual values.

Variables declared with var are hoisted and initialized with undefined.


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

Even though score is declared later, JavaScript knows about it during execution.

Variables declared with let and const are also hoisted, but they are not initialized.

Accessing them before declaration causes an error.


console.log(total);
let total = 50;

This behavior is related to something called the Temporal Dead Zone, which you will explore more deeply later.

Function declarations are fully hoisted. This means they can be called before they are defined.


greet();

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

This works because the entire function definition is hoisted.

Function expressions behave like variables. They are not hoisted in the same way.


sayHello();

const sayHello = function () {
  console.log("Hi");
};

This will result in an error because the function is not available before initialization.

Think of hoisting like planning a meeting:

JavaScript knows what exists before it knows the details.

Clear code order avoids hoisting-related confusion.

Now that you understand how JavaScript processes declarations, the next step is learning how to store and manage collections of data.

In the next lesson, we will learn about arrays.