I’m sure, many of you have read about Hoisting in JavaScript, but maybe you don’t fully understand it. So what is Hoisting in JavaScript and do you really understand it as you think? Let’s find out together
1. JavaScript Hoisting
To understand Hoisting, we must first understand the Execution Context. So what is Execution Context?
To simplify, let’s understand Execution Context is something used to manage which line of code is running, or understand it as a wrapper that helps you manage what code is being run when you run your JavaScript file.
Execution Context has 2 phases, phase 1 is Creation phase, phase 2 is Execution phase.
Let’s temporarily ignore what these two phases are specifically and what they are used for, I will explain it more specifically in another post in the future.
Many people think that Hoisting is about moving the code that declares variables and functions to the top of the page, but it is not. What actually happens is that when your code is compiled, an Execution Context is created. First. it will enter phase 1 (Creation phase). In this phase 1, the analyzer will run through your code and set up memory to store your variables and functions in it. Then it will move on. phase 2 (Execution phase). Basically phase 2 will execute your code, then if we call the function or variable before it is declared, the compiler will be able to access that function or variable (since it is already stored in the remember from earlier when you were in phase 1.) You can read this far and you will find it a bit difficult to understand. Don’t worry, now we will go into the example to better understand what I just showed above
2. Example
2.1 Hosting of functions
1 2 3 4 5 6 | <span class="token function">hello</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token keyword">function</span> <span class="token function">hello</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"Hello There"</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> |
Output: Hello There
Explanation: As I have shown above, when you compile your JavaScript code (run JavaScript code) it will first create an Execution Context and enter phase 1. When in this phase 1, function hello() will be executed. save to a memory cell, then the Execution Context continues to enter phase 2. When in this phase 2, it will run your JavaScript code, In the first line the code compiler sees that you are calling the hello() function, Although function hello() has not been declared at this time, it can still be accessed, that is because the function hello() has been stored in a memory cell while the Execution Context is still in phase 1, so it can be accessed. access the hello() function even before it is declared
2.2 Hosting of variables
Example 1:
1 2 3 | console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> a <span class="token punctuation">)</span> <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token string">"Hello there"</span> |
Output: undefined
Explanation: You may be wondering why the output is undefined right, let me explain to you, Hoisting of variables is somewhat different from that of a function, which is when Execution Context is in phase 1, even though the Execution Context is in phase 1. it stores variables in memory, but it does not save the value of that variable, but by default, it will assign the value to that variable as undefined. Specifically in the above example, var a = "Hello there" , variables a when stored in the memory cell will not be saved with the value “Hello there”, instead the value it is stored is undefined. So at when the compiler runs the code console.log(a) , at this time the variable a has not been declared, so the memory cell still has the value undefined, so the output we get is undefined
Example 2: but if I console.log variables a one more time after the declaration line var a , what will be the output ?
1 2 3 4 | console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> a <span class="token punctuation">)</span> <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token string">"Hello there"</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> a <span class="token punctuation">)</span> |
Output: undefined Hello there
Explanation: the first ouput is undefined then I explained above example 1, about the second output is Hello there , it is because when the compiler runs to the line of code var a = "Hello there" , that variable a is already assigned the value "Hello there" so it is no longer undefined but now the variable a has the value "Hello there" so when console.log(a) in the 3rd line is run, we have the output Hello there
3. A few notes
- when declaring a variable with the let or const keyword, the variable will not be hoisting
4. Conclusion
Through the above article, I hope that you will have a correct view and better understanding of hoisting in JavaScript. Wish you all success in your path.