HashTag JavaScript: Hoisting

JavaScript: Hoisting

Hello folks, In this article, we will discuss Hoisting in JavaScript and how its work behind the scene inside the JavaScript Engine. Before deep-diving into this topic if you have no idea regarding what is Execution context and how it’s work then please first refer to the below article-

HashTag JavaScript: How JavaScript works? & Execution Context?…

HashTag JavaScript: Execution Context and Call Stack

Topic’s to be discussed in this article-

1. What is Hoisting in JavaScript?
2. How does Hoisting work behind the scene inside the JS Engine?
3. Conclusion

Hoisting in JavaScript:

In JavaScript, Hoisting is a mechanism where variables and function declarations are moved to the top of their scope before code execution. This means that no matter where functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local.

According to official MDN document-

Hoisting was thought up as a general way of thinking about how execution contexts work in JavaScript. So the concept of Hoisting in JavaScript is totally dependent on the Execution context (the memory creation and code execution phase).

The definition of Hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not in fact what happens. Instead, the variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code.

For more information, you can refer to the below link-

Hoisting - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

How does Hoisting work behind the scene inside the JS Engine?

Let’s understand the concept of hoisting variables and functions in JavaScript and how Execution context comes into the picture with the help of examples.

Example 1

So let’s deep-dive to understand the above example. As you already know whenever we run our code a global execution context is created and pushed into the call stack. You can assume an Execution context as a container that has two predefined stages which are known as the Memory creation phase and the Code execution phase.
Important:
Step 1 (Memory Creation Phase): When we run our above code, firstly in the memory creation phase also known as variables environment, all the variables and functions assigned with memory space. In the case of variables, it’s assigned with a special placeholder or you can say that JavaScript pre-defined keyword which is undefined. In the case of functions, basically, the whole function block is exactly copied into the memory space. Refer to the below diagram for more clarity -

Memory Creation Phase

Step 2 (Code Execution Phase): After completion of the memory creation phase, the code execution phase will starts. In this phase, the whole code gets executed line by line. Refer to the below image for output of the above code-

Example 1: Output

Explanation: As you can see from the above output, in the code execution phase-
1. When the pointer points to line no. 1 at that time variable value assigned with undefined in memory space that’s why it’s print undefined on the console.
2. When the pointer points to line no. 2, the greeting function is invoked and a brand new execution context is created for the greeting function. As you can see on the console “Hello JavaScript” printed because as you know already in the memory creation phase the whole function block copied into memory space that’s why it’s print “Hello JavaScript” on the console.
3. When the pointer points to line no. 4, i.e. var value = 10; then 10 is assigned back to variable value in the memory space and undefined is replaced with value 10 in the code execution phase.
4. When the pointer points to line no. 5, which is the greeting function, the code is not gets executed because at that time no function invocation comes into action.
5. When the pointer is moved to line no. 9, i.e. console.log(value); at that time variable value holds with numeric value 10 in the memory space. So in this case value 10 is printed onto the console.
6. When the pointer is moved to line no. 10 then it again repeats the second explanation step.

Conclusion:

Hoisting in JavaScript is a concept in which all the variables and functions are logically hoisting onto the top of scope but technically, it’s totally dependent on an execution context in which all the variables and functions are assigned with memory space even before a single line of code gets executed. So that we can access the variable or function before initialization.

Congratulations to all…, we have done with a basic understanding of what is Hoisting in JavaScript, and how it’s work behind the scene inside JavaScript Engine.

It might be confusing at the first time but keep reading these topics from other resources which are available on the internet which help you in long run.

So Let’s meet with another upcoming article next week and for the time being keep learning, keep safe and stay at home.