Hey guys,

Hoisting is an important topic from the perspective of Javascript Interviews so lets understand it in this article

What is hoisting?

We know that the JS engine parses the program once before running the code (see my previous article on how the JS engine works) and also we know that each program consists of variables and functions

Lets understand hoisting with an example,

console.log(greet); //----1

var greet = "Hi";

console.log(greet); //----2

Explanation of the code

1.Console.log(greet)

So what do you think will be the output of the first console.log( ), well var greet is defined after the first console.log( )

— The answer is "undefined" but why ?

This is the concept of hoisting, in which as the JS engine parses through the code if it encounters the "var" keyword word then it immediately stores the value of that particular variable in the memory heap but as undefined

And when it runs the code, if it encounters something like console.log(greet) before even greet is defined then the stored value comes into the play and we get undefined which is the case with the first console.log( greet)

2.Console.log(greet)

Here the output second console.log(greet) is "Hi" because till then the var greet is defined as "Hi" and the undefined is replaced with "Hi" in the memory heap

Note: This is important that the partial hoisting only appears if the variables are declared using the "var" keyword, the JS engine only performs hoisting in case of the variable when there is a "var" keyword, it won't perform hoisting when the variables are declared using let or const

Also in the case of variables, there is partial hoisting

Let's see an example

console.log(sing()); //----1

function sing() {
    console.log("uhh lalala");
}

console.log(sing()); //----2

1.Console.log(sing())

Now you know that in the first console.log( ) there will be hoisting but this time its a function, so what will be the output of it

— Well the answer is "uhh lalala"

Because function in Javascript which start with the keyword function are fully hoisted

When the JS engine parses the code before running if it encounters the "function" word it directly stores the whole function into the memory heap unlike in the case of variables and that's why they are partially hoisted

2.Console.log(sing( ))

And this one is obvious the output of second console.log( sing( )) "uhh lalala" because it comes after the function is declared

"Function are fully hoisted and variables are partially hoisted"

But the important thing to remember in functions is that the function keyword in Js is important for it to get hoisted if we use function expression rather than function declaration it won't be hoisted

let's see what function declaration and function expressions are

console.log(hello())---1
console.log(hi())---2
console.log(hi)---3

//Function declaration
function hello(){
 console.log("greetings")
}

//Function expression
var hi = function(){
 console.log("casual")
}
console.log(hi())---4

1.Console.log( )

Now after reading everything if you understood some things you will be able to answer the first console.log( hello( ))

— Well the answer is "greetings"

This is Fully hoisting the function hello

2.Console.log( )

This one is a little tricky because the function hi is a function expression and a function expression starts with var but in the second console.log(hi( )) the function hi( ) is called inside the console.log( ) and if the function expression is called before it is declared then the answer will be

— "Typeerror"

That will throw an error because it doesn't think of it as a function at the second console.log( ), it thinks of it as a variable

3.Console.log( )

But in the third console.log( ) the JS engine know that it started with var so it is stored inside of the memory heap as — "undefined"

Alright, so here as I explained earlier if the JS engine encounters the "var" word it will keep it undefined even if it's a function

4.Console.log( )

And the last and fourth console.log( ), the function is already defined and declared so the output will be

— "casual"

As it is called after being defined it will show the output as casual

Some key points to remember

1.Every time there is execution context there are two are two phases, a creation phase and execution phase, in the creating phase there is hoisting and it is for a very single function on the call stack.

2.Functions are fully hoisted and variables are partially hoisted

3.Variables defined with let and const are not at all hoisted

4.Function declarations are hoisted, function expression is not

These are the things you need to keep in mind while we are talking about hoisting and I hope you have understood the concept of hoisting and as you encounter questions regarding hoisting it will get a lot clearer

Do you have any points to add or do you thing we made any error so

Reach out to us on Twitter and Instagram where we try to provide more value in threads and carousal formats

Keep learning, keep coding

Thank you