Hoisting in Javascript

#javascript #webdev #tutorial #beginners

Hello Guys today i am discussing about Hoisting in Javascript.

What is Hoisting?
Hoisting is a process in which the declaration of variables and functions are moved to the top in the scope by the interpreter.
We can move the declaration of variables to the top with default value(Only the declaration part not the initialization part) or we can use a function call before it's declaration and then after that we can provide the declaration part in the code.
Let's understand this with examples.

Example 1 - Variables Hoisting

console.log(a)
var a = 10;
//output - undefined

console.log(b)
let b = 20;
// output - ReferenceError: Cannot access 'b' before initialization

console.log(c)
let c = 20;
//output - ReferenceError: Cannot access 'c' before initialization

As you can see we have console logged the variables before declaring them.
It returns undefined in case of variable declared with "var" keyword because the declaration part is hoisted with "var" not initialization part.
In case of variables declared with "let" and "const" , it returns a reference error because "let" and "const" are not hoisted with default value.

Example 2 - Function Hoisting

hoistedFunction()

function hoistedFunction(){
  console.log("This function is called before it's declaration")
}
//output - This function is called before it's declaration


hoistedParameterisedFunction(10,20,30)

function hoistedParameterisedFunction(a,b,c){
  console.log(a,b,c)
}
//output - 10 20 30


hoistedArrowFunction()

let hoistedArrowFunction = () => {
  console.log("This function is called before it's declaration")
}

//output - ReferenceError: Cannot access 'hoistedArrowFunction' 
//before initialization

You can see we have called the function before it's declaration and still it gives the output because in case of function hoisting , the entire function declaration along with its body is hoisted so, it gives the desired output.
We can also pass parameters to the function call which is hoisted.
In case of Arrow function , we have assigned the anonymous arrow function to the "hoistedArrowFunction" variable , hoisting this will give a reference error same like in case of variable.