Hello beautiful people!

Today we are going to be learning about Hoisting in JavaScript. As you already been thinking that why I mentioned hoisting is a weird behavior of Java Script. Well, its weird because Java Script is weird 😂. Don't you agree?

Enough talking (as you people don't like that 😉) let me start with a simple example.

var myName = 'Charan';
console.log(myName)

You already know the expected output for the above piece of code. It is

So far so good, everything is fine. But now, what if I change the above code a little and write it as

console.log(myName)
var myName = 'Charan';

Can you guess what is the output 🤔. Well if you read my previous article about different ways to declare a variable in JavaScript , you would have already guessed it correct.

The output is undefined as shown below:

The question here is why is that happening?

The reason

Well, before our Java Script actually runs, the compiler takes all the variable declarations and function declarations and moves all the way to top. That's what Hoisting is!

So, if you really want a pure technical definition if Hoisting (if you are more advanced person 🙌)

Hoisting is JS's default behavior of defining all the declarations at the top of the scope before code execution. JavaScript only hoists declarations, not initializations.

So, after Hoisting, the above code will convert internally into something like this:

var myName; //Declaration moves to top

console.log(myName) //Default value of a variable declared but not initialized is `undefined`

myName = 'Charan'; // Initialization remains same

You can find the explanation of why we are getting undefined as output in the above code as comments.

Hoisting of functions

Let us see how hoisting effects the functions in Java Script.

Let's say, we have a function:

function myName(){
    console.log('Charan')
}

myName()

I know you are smart enough this time to know the possible output of above code snippet.

So, now lets tweak the code a little:

myName()

function myName(){
    console.log('Charan')
}

So, in the above code, even though we have called myName() even before its declared, we will get the correct output.

Why is that happened? You know that already, due to hoisting the function declaration will move up to top of the scope, so apparently after hoisting the above code will internally becomes like this:

Lets see other way of declaring a function in Java Script, that is Function Expressions, where we store the function in a variable. Assume, we have a function as shown below:

var myName = function(){
    console.log('Charan')
}

myName()

The output is as expected.

But, like before, if we move the function call before the function declaration,

myName()

var myName = function(){
    console.log('Charan')
}

Guess what, we will get a error now saying myName is not a function.

Can you imagine what would have happened? Let's visualize how the above code will be converted due to Hoisting. the variable declaration var myName will move to top and the actual initialization of the function will remain after the myName() function call. You can see the same below:

var myName; //declaration moves to top

myName() //here var myName cannot be identified as a function myName()

//actual value will remain here
myName = function(){
    console.log('Charan')
}

One of the benefits of hoisting is that it enables us to call functions before they appear in the code.

---

We are modern people having modern thoughts! 😎 So, generally we wont use var keyword to declare variables. If you want to know more about why? You should read this article .

So, if we use let or const to declare a variable, the stupidity of Hoisting will not happen.

For example:

console.log(myName);
const myName = 'Charan';

In the above example we have used const instead of our grandfather old var. So, if you remember, when we used var for the same code above, we got undefined as output. But for the above code, where we replaced var with const, the output will be:

---

Conclusion

So, we have learned about Hoisting in JavaScript with some examples. Also, its again proved that we have to use let or const to declare variables in Java Script.

Hope you learned something new today.