Hoisting in JavaScript

When it comes to hoisting, there's a lot of confusion among web devs. Many of them explain it as the property of JavaScript which moves the code to the top of our command. But is that really so?

To understand it better and take a deep dive into this topic we need to first understand how a JavaScript code is executed.

So read about it first, otherwise this will be long blog if I try to explain it here.

So now that you know how a JavaScript program runs behind the scenes, we ready to learn about hoisting.

Let's understand it with a simple example-

 var x = 3;    //initializing variable
 function username(){  //initializing function
      console.log("Bruce Wayne");
 }

 console.log(x);
 console.log(username());

Here the output will simply be as expected , i.e. -

  3
  "Bruce Wayne"

But what if the both the consoles were moved to the top of the code? Would the result still be same?

 console.log(x);
 console.log(username());    

 var x = 3;    //initializing variable
 function username(){  //initializing function
      console.log("Bruce Wayne");
 }

Now the output will be :

 undefined
 "Bruce Wayne"

Now the question arises - why does the the value of output of the function not change but the var changes to undefined. The answer simply lies in how the JavaScript works. As the JS stores each var value as undefined and function value as the whole function invocation itself in the memory allocation phase of the global execution context. The thing with JS is that it hoists declarations but not initializations. This means that initialization doesn't happen until the associated line of code is executed. So until that point is reached, the var continues with its default value i.e. undefined but since functions get invocated wholly, JavaScript just performs the function when declared.

OK, I know it's a lot to digest. Let me break it down in Layman's term for you-

Suppose you have apples (variables) and grapes (functions) in two different baskets and you have to label each fruit with a sticker before selling it in the market. Now, the catch here is that apples need to have the sticker compulsorily while grapes may be exempted from it. Now what happens is that your partner truck driver (JavaScript) puts both the baskets in the truck (global execution context) without checking the stickers because he doesn't care, his job is just to transport fruits (to execute code), so while you are busy getting stickers , he just puts the baskets in his truck and drives away. Now in the market, the apples aren't sold but the grapes do irrespective of the sticker i.e. the functions return their value but variables do not when declared(sold) before initialization(applying stickers).

Peculiarities in variable initializations:

• var is functional scope and hence it returns value as undefined even if it is declared before initializing.
• let and const are block scope and return a Reference Error if they are declared before initialization.

That's why usage of let and const is recommended more than var as it helps in debugging the code much faster.

Another thing to keep in mind is: JavaScript always considers the initializations in block scope over functional scope.

Thankyou for reading this blog. Signing off...Godspeed !!!