Full Documentation: Hoisting in JavaScript

Follow me

What is Hoisting?

Hoisting is a JavaScript behavior where variable and function declarations are moved to the top of their scope (global or function scope) before the code executes. This allows the use of functions and variables before they are declared. However, only the declarations are hoisted, not the initializations.

How Hoisting Works

Variables declared with var are partially hoisted, meaning they are moved to the top but initialized as undefined.

Variables declared with let and const are also hoisted, but they are placed in a "temporal dead zone" (TDZ), making them inaccessible until the point of declaration.

Function Declarations are fully hoisted, meaning they can be invoked before their declaration.

Function Expressions and Arrow Functions behave differently since only the variable declaration is hoisted, not the function definition.

Examples of Hoisting

1. Hoisting with var

console.log(a); // Output: undefined

var a = 5;

console.log(a); // Output: 5

Explanation:

The declaration var a; is hoisted to the top.

However, the initialization (a = 5) stays in place, so the first console.log prints undefined.

2. Hoisting with let and const

console.log(b); // ReferenceError: Cannot access 'b' before initialization

let b = 10;

Explanation:

The let declaration is hoisted, but it is in the TDZ, so accessing it before initialization results in an error.

3. Hoisting with Function Declarations

greet(); // Output: Hello!

function greet() {

  console.log("Hello!");

}

Explanation:

The entire function greet() is hoisted, so it can be invoked even before it is defined.

4. Hoisting with Function Expressions

sayHello(); // TypeError: sayHello is not a function

var sayHello = function () {

  console.log("Hello!");

};

Explanation:

The var declaration of sayHello is hoisted, but it is initialized as undefined.

Since the function expression isn’t hoisted, calling it before the assignment results in a TypeError.

5. Hoisting with Arrow Functions

greet(); // TypeError: greet is not a function

var greet = () => console.log("Hello, Arrow!");

Explanation:

Similar to function expressions, only the variable declaration is hoisted, not the function definition.

Best Practices to Avoid Issues with Hoisting

1. Use let and const instead of var to avoid unintentional bugs.

2. Always declare variables at the top of their scope.

3. Keep function expressions and arrow functions declared before they are used.

4. Understand the temporal dead zone behavior for let and const.

Summary

Hoisting is a JavaScript mechanism where declarations are moved to the top of their scope. While it simplifies function calls, it can lead to unexpected behavior if not understood properly. Using let and const helps to avoid common pitfalls related to hoisting.