Hoisting ..........

So what is Hoisting ? .

A normal being like me , do google and get its meaning.

accn to google -

Some common synonyms of hoist are boost, elevate, heave, lift, raise, and rear. While all these words mean "to move from a lower to a higher place or position," hoist implies lifting something heavy especially by mechanical means.

so now after reading the english meaning ,what we know about hoisting ?

Ya you are absolutey right , Hoisting is like a body builder. Who is lifting .

So before learning about hoisting we should know about execution context, it is a object that holds the information about the enviroment in which current code executes.

First a global execution context is created -

Execution Context comprises of two parts -

• memory allocation phase
• code execution phase

Memory allocation phase In memory allocation, before executing a single line of code , memory is allocated to all the variable and functions

lets see an example -

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

so what you think , output will be- In most of the language , we get a big fat error telling that it is a reference error. but JavaScript is built different

So we will get a output that no one expected (only those who don't know Hoisting);

undefined

yaa you saw right , we get a undefined . This clearly indicates that something happens before execution of code .

That something is hoisting , Basically, it gives us an advantage that no matter where functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local. all the variables got a value undefined and all the functions declarations get memory.

so when the code executes in line by line and a variable is used before its initialization , it will simply give undefined instead of error.

let and const hoist in a different way. instead of including in global object they are in stored in some other object we called script

let a =10 ;
const b = 10;
var c= 10;

so see the source section of browser developer tools carefully, in bottom right we can see a script object and a global object , "a" and "b" variable lies in script object and "c" variable lies in global object , so it will not behave like a global object variable and give us error if we try to access them before initialization.

console.log(a)
console.log(b)
console.log(c)
let a =10 ;
const b = 10;
var c= 10;

so here's the output :

console.log(a)// Uncaught ReferenceError: Cannot access 'a' before initialization
console.log(b)//Uncaught ReferenceError: Cannot access 'b' before initialization
console.log(c) // undefined
let a =10 ;
const b = 10;
var c= 10;

so here another concept comes into action called Temporal dead zone , we will discuss that in upcoming blog .

Hoisting for functions

In case of function the the entire function will go at the top , so we can access functions even before declaring them and given high priority than variable declarations

lets take an example

getName() ;

function getName(){
       console.log("getName is called before its  declaration")
}

output :

getName() ; //getName is called before its  declaration

function getName(){
       console.log("getName is called before its  declaration")
}

Hoisting function expression

like functions , function expression not work in that way .

lets see the code

getName()

var getName = function(){
    console.log("gettname called")
}

now here we are using function expression an we get the output

getName() // getName is not a function
console.log(getName) // undefined

var getName = function(){
    console.log("gettname called")
}

• we got a error that "getName is not a function" when we call getName();

• on second line we get undefined ;

so here the function expression is nothing but a variable having a anonymus function , same rule apply for fat arrow functions.

So now you know what is Hoisting , yaaa you are right the body builder who lifts 🤭

Conclusion Let’s summarise what we’ve learned

• Hoisting is a process that declares variables and functions into memory space ahead of assignment and initialization within the given scope of execution.
• Only variable declarations and function declarations are hoisted.
• const and let will be hoisted but cannot be read or accessed before their initialization.
• function declarations are given high priority than variable declarations while hoisting.