What is Hoisting In Javascript?

This tutorial explains about Variable and Function hosting in javascript. If you’re just starting to learn JavaScript, you may have come across the term hoisting before. Basically Hoisting is JavaScript's default behavior of moving declarations to the top.

What is hosting ?

In JavaScript, a variable can be declared after it has been used. In other words; a variable can be used before it has been declared.

Point to Remember :
Variables and constants declared with let or const are not hoisted!

Lets see the below examples for variable and function hosting in javascript :

Variable Hosting Example :

Typically we would declare and initialize our variable, and then attempt to use it:

var a = 5;
console.log(a);

// Output :-  5

Here we declare and initialize our variable at the bottom of our code. Lets see the below example, which will return the result undefined.

console.log(a);
var a = 5;

// Output :-  undefined

But as per the hosting concept a variable can be declared after it has been used. Lets see the below hosting example:
Variable Hosting example :

a = 5;
console.log(a);
var a;
// Output :- 5

Function Hosting Example :

Basically we are creating function first and then calling in the below manner :

function display(data){
  console.log(data);
}
display('skptricks');

//Output :- skptricks

lets see the another example, which will throw error message in browser console.

display('skptricks'); 

var display = function(data){
  console.log(data);
}

//output :-
Error: display is not a function

But as per the hosting concept a function can be called  before the function body. Lets see the below hosting example:
Function Hosting Example :

display('skptricks');

function display(data){
  console.log(data);
}


//Output :- skptricks

JavaScript Initializations are Not Hoisted

lets see the below example for initializations :
Example -1 :

var x = 15; // Initialize x
var y = 17; // Initialize y

console.log(x)
console.log(y)

// output : 
> 15
> 17

Example -2 :

var x = 15; // Initialize x

console.log(x)
console.log(y)

var y = 17; // Initialize y

// output : 
Error: Unexpected token >

Summary :

1. A variable can be declared after it has been used.
2. Variables and constants declared with let or const are not hoisted.
3. JavaScript Initializations are Not Hoisted

Best Practices :
You should also always try to initialize variables when you declare them. This will provide cleaner code and help avoid undefined variables.

This is all about Hoisting In Javascript. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.