JavaScript hoisting behind the scenes.
Tags: javascript, programming, beginners
Published: 2023-03-18 16:43:37

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/er8j0p3qmiz27ngxde4f.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fdfif4rob25k9k3duw5.png)

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`.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h0ksol7r7w5yynpun7h0.png)

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. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qbviw20ppyfy9ua06et9.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jy6g8rzhrttw3l1n8sf7.png)

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.