What is Hoisting In JavaScript

Sooner or later you will encounter the concept of "Hoisting in JavaScript", It does sound like quite a complicated thing, but hopefully, by the end of this quick article, we will be able to demystify it. You will know exactly why you can invoke functions even before they are declared, which by the way as many of you know is considered a crime in many other languages and the code would not even compile.

Lets quickly see an example of JavaScript Hoisting.

//Calling function and variables before they are defined

foo();  //Will output "Hello World, from foo"
console.log(bar); //Will Output undefined


function foo(){
   console.log("Hello World, from foo");
}

var bar = "Hello World, from bar";


//We will later see, why our variable `bar` is printed undefined

Hoisting What it is not

If you do a quick google search about "Hoisting in JavaScript", you will be presented with many answers, which talk about that the JavaScript engine physically move your variables and functions at the top of the code file, and now that they are defined at the top of your code, they can be used and invoked without a problem. This is not correct

"Honestly the word Hoisting is not very intuitive for understanding how JavaScript Hoisting work's under the hood".
When I first learned about it. My mind was instantly drawn to the incorrect explanations because the word Hoisting does give you this impression that the variables and functions are somehow hoisted above the rest of your code.

Hoisting in JavaScript

To fully understand how Hoisting works, we need to delve a little deeper and learn how the JavaScript Engine executes your code. There are essentially two phases of code execution.

1) Execution Context Creation Phase.
2) Code Execution Phase.

Execution Context Creation Phase

Before executing your code line by line. JavaScript engine will setup the environment for your code execution, It scan's your code file and then reserve's the memory space required for those variables and functions. For variables, it's a little different, while setting up space for variables the JavaScript engine will also initialize them with undefined type. You might be able to tell now, why we were not able to print the value of bar in the above code and instead we got undefined but were able to successfully invoke foo() function. This is because the Execution Context Creation Phase only reserves memory for variables and initializes them with undefined type, the final value is not set until the actual Code Execution Phase begin's.

Code Execution Phase

Once the Execution Context is created JavaScript engine will start executing your code line by line in the order in which you have written your code. Because of the previous phase and the so-called Hoisting you will have access to functions and will be able to call them wherever you would like. But as you saw the space for variables is only reserved and by default set to undefined.

Hopefully, by now you will have a better understanding of how JavaScript Hoisting works under the hood.