Hoisting

What is Hoisting?

Hoisting is a JavaScript behavior where variable and function declarations are moved to the top of the current script or the current function during the compilation phase.

This means you can use variables and functions in your code even before they are declared.

Note: Only the declarations are hoisted, not the initializations (means their values).

Let’s understand this with some examples.

Variable Hoisting

console.log(x);
var x = 13;

Here, you are trying to console.log the value of x before its declaration, you might expect it to throw an error, right?

Let’s run this code and see what happens.

This gives undefined not any error. But why does this happen?

This happens because of the hoisting.

In the console.log, the declaration of x is hoisted to the top with an initial value of undefined. So it doesn’t give the error.

Now let’s take another example.

console.log(x);
var x = 13;
console.log(x);

Output:

In the first console.log, x is hoisted to the top with an initial value of undefined and in the second console.log, after the declaration, the value of x is now 13.

To put it simply, hoisting means the declaration of both variables and functions is moved to the top of your code behind the scenes. So, even if you write your code in a certain order, JavaScript rearranges it during its compilation phase.

What if you use let or const instead of var?

console.log(x);
let x = 10;

Output:

Here, you get a ReferenceError.

Now, let’s see this with const.

console.log(x);
const x = 10;

Output:

Variables declared with let and const are hoisted, but they are not initialized with undefined like var variables. So using them before declaration results in a ReferenceError. This is known as the Temporal Dead Zone (TDZ).

Hoisting with Function Declarations

greet();
 
function greet() {
  console.log("Hello, World!");
}

Output:

Here, the function greet is hoisted to the top, so you can call it before its declaration.

Hoisting with Function Expressions

greet();
 
var greet = function () {
  console.log("Hello, World!");
};

Output:

Here, only the variable greet is hoisted, not its value. So, when you try to call it before the assignment, it throws an error.

Note: Function declarations are fully hoisted, while function expressions are not.

In summary, if you’re using a variable or function before declaring it, don’t worry, JavaScript will know about it and won’t throw an error. But keep in mind that only the names are hoisted (moved up), not their values.

To put it simply, It’s like telling your friend about a plan but not the details of the plan. They’ll know there’s something, but they won’t know the details.

Best Practices

To avoid any confusions or errors, it’s a good practice to declare and initialize variables at the top of their respective scopes.

For example:

// Good Practice
var x = 13;
console.log(x); // Output: 13
 
// Avoid
console.log(x); // undefined
var x = 13;

TL;DR

• var declarations are hoisted and initialized with undefined.
• let and const are hoisted too, but not initialized, leading to a ReferenceError if accessed before declaration — this is called the Temporal Dead Zone (TDZ).
• Function declarations are fully hoisted.
• Function expressions are hoisted only by name (as undefined), so calling them before assignment causes a TypeError.