Blog

What is hoisting?

JavaScript is having default behavior of moving all declaration at the top of the scope (or in the global scope) is called hoisting. JavaScript moves declaration of variables, functions or classes at the top of their scope.

Variable hoisting

In JavaScript variable cycle is declaration, initialization and usage. Declaration and initialization can be done separately or together. Even we declare and initialize together, hoisting feature makes them separate.

var i = 5 // declaration and initialization
console.log(i) // use of variable

Internally JavaScript hoist the variable like this:

var i // declaration
i = 5 // initialization
console.log(i) // use of i

Hoisting doesn’t make much difference in above example. Now consider the other example.

console.log(i) // use of variable
var i = 5 // declaration and initialization

In above example, we used variable even before it declared. Internally JavaScript hoist i at the top.

var i
console.log(i) // undefined
i = 5

This code will not throw an error because the variable i is hoisted at the top. It is not initialized at the top so the output will be undefined.

Note: Only declaration is hoisted not initialization.

For the new developer, hoisting can confuse and lead to a bug in program. It is always a good practice to declare and initialize all variables at the top of the scope.

Let’s take another example.

function hoisting() {
   // count is available here too
   	
   if(condition) {
      var count = 1
      return count
   } else {
      // some code
		
      //count is available here too
      return count
   } 
	
   //count is available here too
}

In the above example, even count is declared in if condition, it is available in else too. Because internally it is hoisted like this.

function hoisting() {
   var count

   if(condition) {
      count = 1
      return count
   } else {
      // some code
      return count
   } 
}

So, in else count is available (due to hoisting) but not initialized so it returns undefined. It will not throw an error.

let and const declaration

console.log(i) 
let i = 5

The variable declared using let keyword has only block level limited scope. The let declared variables are not hoisted at the top of the block.
The meaning is, JavaScript engine knows about the variable but does not initialize it. (Remember! The variable declared as var initialize it as undefined)

It is always a best practice to place let declaration at the top of the block.

function hoisting() {
   // count is not available here
	
   if(condition) {
	let count = 1
	return count
		
   } else {
	// some code
		
	//count is not available here
   } 
	
	//count is not available here 
}

In above example, if the if condition is not reachable, the count is never declared or initialized. It almost behaves same as most C-based languages.

Hoisting the variables with const works exact the same way as let except const must declare and initialize at the same time.

Function hoisting

Similar to variable hoisting, function hoisting allows us to use function even before declaration.

callPerson('John')

function callPerson(name) {
   console.log("Hi " +name+ "! How are you?") // Hi John! How are you?
}

If hoisting is not available, the above code will throw an error.

Summary:

Hoisting means the declaration of variables, functions or class at the top of the scope before actual declaration and initialization.

For new developers it may confuse and lead to bug in a program so it is always a good practise to declare all the variables at the top.

Variables defined using let and const scope is block level. They are not available outside of the block. They throw an error if used before declaration (const even need to be initialized with declaration).

JavaScript strict mode does not allow to use any variable before it is declared.