This article is originally written here with code snippets and images => https://easyontheweb.com/what-is-hoisting-in-javascript/
One of the most commonly asked questions in Javascript has to be “What is hoisting in javascript ?” or well, the same questions phrased in a different way. Nevertheless, the point is that hoisting is something that is expected of developers that it is known and understood by them.
I myself have faced this question in an interview before and luckily was able to give a satisfactory answer to this. Hoisting in javascript is a very important concept especially if you come from languages that do not hoist their values.
In this articles, we’ll see what hoisting values means and how hoisting works in general in Javascript.
What is hoisting ?
Hoisting is the behaviour of moving variables and functions to the top of the current execution context or environment.
If this definition sounds very technical and you did not get what it actually means let us take a code example in javascript and C and compare them to understand hoisting.
Javascript
C
So, what would happen here is that in Javascript we will not face any error even though the function declaration for bark() is after it is called. This is because Javascript supports hoisting and this function has actually been moved to the top of the execution context during compilation.
In C though, we will get an error, because the variable myVar is declared after it is being used. So, when it is being used, there is no such thing as myVar.
I hope this example was good enough to illustrate the point of hoisting and what does it actually mean to take things to the top of the execution environment.
Different languages implement hoisting while many do not. It has it’s pros and cons like any other programming concept and you may be a fan of it or hate it.
Hoisting in Javascript
Javascript is one of the languages that does have hoisting. When it comes to javascript, variables and functions are hoisted to the top of the current execution context during the creation phase of the context, ie, compiling.
Let us see what actually happens during hoisting and how the compiler works with this concept – so what happens is that during the compilation phase, the compiler runs through the entire code block and searches specifically for the terms ‘var’ and ‘function’. These are the only two things that get hoisted in Javascript.
So, every time the compiler encounters one of these terms, it reserves a memory space for them. That is, it knows that it needs to reserve memory beforehand because they will take up memory later.
Also, note that I specifically mentioned the terms var and function because only these two terms get hoisted. Not const, no let and a lot of other tiny things that we’ll discuss ahead.
Another very important thing is the fact that variables get partially hoisted whereas functions are completely hoisted. What does that mean ? Let us see this in action in the next section.
Variables get partially hoisted whereas functions are completely hoisted
Let us now see what it means to be partially and completed hoisted. I talked before that variables get partially hoisted.
NOTE: const and let do not get hoisted. This is because the compiler specifically only searches for the keyword var and hoists it.
Now, the var variables get hoisted partially. Let us first see a code example and then discuss what that means.
Why did we get undefined ? Well, that is the answer to partial hoisting. Had the variable myVariable not been hoisted, we would have gotten a reference error (Just like in C) and had it been completely hoisted, we would have console logged the value “Amit Patial”. Because of variables being partially hoisted, we got undefined.
What happens under the hood is that when it comes to var, javascript just allots memory to that variable and does not instantiate it. Therefore, undefined gets stored in it, which we see as the console log. If we console log after the manual declaration we’ll see the expected Amit Patial printed.
Therefore, it is very important to remember that variables are only partially hoisted in Javascript.
Next are functions, which are completely hoisted in JS. And as you may have guessed by now, complete hoisting means that you can use them before the declaration just as you would after their declaration. I’m not going to give an example of a successfully hoisted function because it is the same as in the last section but I’ll be talking about a few gotchas for functions here.
As I’ve been pointing out again and again it is the keyword ‘function’ that the compiler looks for during the compilation and then it reserves the place in memory for the function itself. What about something like the next code snippet ?
Why do you think we got an error in the second one ? Because the compiler searched for the first term as ‘function’ and for the second function the first letter was ‘(‘ , therefore, this function was not hoisted which resulted in an error.
Another thing that you must have figured out by now is that function expressions are also not hoisted for the same reason. But a very interesting thing happens with something like this (NOTE: It only happens in certain JS environments and not all).
This happens only on certain JS environments
So, why do you think this happens ? Well, because ‘hello’ gets hoisted but is set to undefined just like any other variable. Therefore, we cannot call it as a function.
Points to remember..
A few points to remember regarding hoisting are :-
Compiler only hoists var and function keywords.
let and const are not hoisted (are hoisted but not initialised actually).
Variables are partially hoisted whereas functions are completely hoisted.
Function expressions are also not hoisted.
If you liked this article and would like to read more articles related to Javascript please check out this link => https://easyontheweb.com/category/javascript/
If you want a facebook group with other web developers and me please join this group here => https://www.facebook.com/groups/503230450489995
Top comments (0)