JavaScript hoisting behind the scenes.

Do you ever wonder how the javascript engine works behind the scene and how it manages variable hoisting? If not no worries we will dive deep into it and see how all this magic happens behind the scene.

First, let's understand how javascript code runs. Consider the following code to start things.

Although there is a myth that javascript is interpreted language that's incorrect, Javascript compiles the code before the execution. Javascript engine is v8 in the case of chrome tokenized the code and converted it into the machine understandable code.

Code execution

• When the compiler sees var a = 2; it creates memory space with the label a in the call stack and assigned the value undefined to it as a placeholder. After the compilation ends undefined during the runtime value is replaced with 2.
• When the console.log(a); is executed during the runtime that's how the conversation between the engine and execution context looks like.

Engine : Hey context! do you know a variable named a?
Execution context : Hey! Yes I have a variable with a name.
Engine : Great! I have a LHS reference of the variable a. Can you provide me with the RHS of it?
Execution context : Yes no problem , there you go.

Result in the console: Displays 2.

Now you have a bit of an understanding of how javascript code run and how it interacts with the call stack.

As you all know there are several ways you can declare and initialize the variables. Let's look at the difference and understand the difference between them.

Let's look at the var first.

Consider the above code what should be the expected output take a minute and think......... is it an error or it outputs the value 2?
Surprisingly undefined will be printed on the browser console but why is that? As we discussed above before the execution javascript engine tokenizes the code and compiles it so during the compilation time a namespace labeled variable will be created in the call stack with the placeholder undefined. When the javascript engine runs the code console.log(variable); line occurs before the variable declaration and at that time call stack has the placeholder value undefined for the variable so the console output that value undefined and after that when the javascript engine reaches to var variable = 2; line it replaces the undefined value with the value 2 but at that time console.log(variable); is already executed.

You can also use let and const keywords to initialize and declare variables in javascript and let's look at these and how these are different from var.

Consider the above code what should be the expected output take a minute and think again......... is it an error or it outputs the value hello world!!! or it outputs the value undefined?
So the wait is over the output will be Reference error. But why is that? isn't should display undefined? Javascript engine starts to tokenize the code during the compilation time when the javascript engine sees the variable declared with let keyword i.e let helloworld = 'hello world!!!'; it creates a memory space in the temporal dead-zone not in the call stack and the temporal dead-zone is not accessible to the execution context so instead of undefined reference error is thrown by the engine.

As you have heard that the let is blocked scope and var is function scope. Let's look at it with an example.

Consider the two same code blocks the only difference is the variable initialization.

What will be the output of the first code block? Think about it.....Think hard....Alright so the output will be 10 because the variable declared with var is scoped with the function in which the variable is declared. And there is a drawback of using var because as we see it is polluting the scope and it can create conflicts if we use variable i in another place. And the execution of for loop is completed so there is no need for the variable i but due to the var behavior, it's still there and accessible.

If we look at the second code example what will be the output take a deep breath and think......Alright, I will tell you. The output will be a Reference error but why is that ? As we see the let variable limits itself within its scope. And after the for loop execution the garbage collector frees up the memory so no i variable exists after the for loop block scope.

NOTE: The let and const are the same thing the only difference is that const cannot be reassigned.

Keep following I will be adding more blogs related to javascript.