Skip to main content

Hoisting in JavaScript

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their respective scopes before code execution.

This means that even if a variable or function is declared after it is used, it can still be accessed as if it was declared at the top of the scope.

Variable hoisting applies to variables declared with the var keyword, and function hoisting applies to function declarations, not function expressions.

Here's an example of variable hoisting:

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

In this example:

  • The variable x is declared after it is used in the first console.log() statement.
  • Because of hoisting, it is moved to the top of its scope (the global scope, in this case) before code execution.
  • And its value is undefined at the time of the first console.log() statement.

Here's an example of function hoisting:

myFunction(); // Output: "Hello, world!"

function myFunction() {
  console.log("Hello, world!");
}

In this example:

  • The function myFunction() is declared after it is called.
  • Because of hoisting, it is moved to the top of its scope (the global scope, in this case) before code execution, and its code is executed when it is called.

The let and const Keywords​

The let and const keywords were introduced in ES6 (ECMAScript 2015) and are used to declare variables in JavaScript.

Unlike the var keyword, which is also used to declare variables, let and const do not get hoisted to the top of their scope. This means that if you try to access a variable declared with let or const before it has been declared in the code, you will get a reference error.

As an example:

console.log(a); // ReferenceError: a is not defined
let a = 10;

In this example:

  • The variable a is declared using let and then assigned the value 10. However, if you try to access a before it has been declared, you will get a reference error.

Similarly, the const keyword also does not get hoisted, and you cannot reassign a new value to a variable declared with const.

As an example:

const b = 5;
b = 10; // TypeError: Assignment to constant variable.

In this example:

  • The variable b is declared using const and assigned the value 5. However, when you try to reassign b a new value of 10, you will get a type error.
tip-always declare variables at the top

It is a good practice to declare your variables at the top of their respective scopes (i.e. functions or blocks) to help improve code clarity and readability. This can help avoid bugs caused by variables being declared in unexpected places and can also make it easier for other developers to understand your code.