What is Hoisting in JavaScript?

What is Hoisting?

JavaScript hoisting is a concept that refers to the behavior of how variable and function declarations are moved to the top of their containing scope during the compilation phase before the code is executed. This allows you to use variables and functions before they are declared in the code. However, it's important to note that only the declarations are hoisted, not the initializations.

Types of Hoisting:

• Function Hoisting:

  Function hoisting is a JavaScript behavior that allows you to use a function before it's declared in the code. During the compilation phase, function declarations are moved to the top of their containing scope, allowing you to call them anywhere in that scope, even before the actual declaration in the code.

sayHello(); // Output: Hello, World!
function sayHello() {
  console.log('Hello, World!');
}

In this example, the sayHello() function is called before its declaration, but it works because the entire function declaration is hoisted to the top during the compilation phase.

It's important to note that function expressions do not behave the same way as function declarations when it comes to hoisting:

// This will result in an error
sayHi(); // Error: sayHi is not a function
var sayHi = function() {
  console.log('Hi!');
};

trying to call the function before the assignment will result in a TypeError because sayHi is undefined at that point.

• Variable Hoisting:

  Variable hoisting is a JavaScript behavior where variable declarations are moved to the top of their containing scope during the compilation phase before the code is executed. This allows you to use variables before they are declared in the code. However, it's important to note that only the declarations are hoisted, not the initializations.

An example using var keyword:

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

However, if you use let or const for variable declarations, hoisting still occurs but with a different behavior:

console.log(y); // Error: Cannot access 'y' before initialization
let y = 10;
console.log(y); // Output: 10

With let and const, the variable is hoisted to the top of the block, but it's not initialized. Trying to access it before the declaration results in a ReferenceError.

• Classes Hoisting:

  In JavaScript, classes are a type of syntactic sugar over the existing prototype-based inheritance model. When it comes to hoisting, classes exhibit behavior similar to function declarations, allowing you to use them before they are declared in the code.

  Consider the following example:

const obj = new MyClass();
class MyClass {
  constructor() {
    this.property = 'Hello, World!';
  }
}

console.log(obj.property); // Output: Hello, World!

The MyClass class is used before its actual declaration in the code. Despite the apparent top-down flow of the code, the class declaration is hoisted to the top of its containing scope during the compilation phase. As a result, you can create an instance of the class (const obj = new MyClass();) before the class is declared.

However, it's important to note that class expressions do not behave the same way. If you try to use a class expression before its declaration, you'll encounter a ReferenceError:

const obj = new MyOtherClass(); // Error: Cannot access 'MyOtherClass' before initialization
class MyOtherClass {
  // class implementation
}

Conclusion

That was all about the concept of Hoisting in JavaScript. You learned how Hoisting works in the case of Functions, Classes, and Variables. We hope you liked the article and it helped you in clearing your JavaScript basics. Please follow the DevHub blog on Hashnode and join the community on Discord for free resources, roadmaps, articles, and job opportunities!