Synonyms of Hoist : Raise, Pullup,Uplift,……..
Hey Google, “ What is Hoisting in Javascript? ”
Hoisting is the JavaScript interpreter’s action of moving all variable and function declarations to the top of the current scope.
Does it physically move all the variables and functions up to the top? Perhaps a bit confusing?
Let's understand in layman’s term. Its’ not like Javascript Engine physically moves the code to the top that you've typed around and then execute.
Generally, The Execution context in Javascript is created in two phases :
1. Creation Phase
2. Execution Phase
- Creation phase: Suppose let’s say you have Javascript file which was declared with a couple of variables and functions. So, when you give this file to the javascript engine(Chrome v8), First it starts the creation phase in which it Sets up memory space for all variables and functions, ( this step of setting up memory space for variables and functions ) what everyone is calling the Hoisting.
Important:
Variables✍️: While it setups a memory space for variables, it Just creates a memory space, again it just create a memory for that varaible only and puts its value to “Undefined” at the time of creation phase (it don’t takes the actual defined value).
Functions✍️: While it setups a memory space for variables,but when it comes to functions it will create a memory space of entire block of code (meaning that the function, its name and the code inside the function is being executed.)
2. Execution Phase: During this phase, When the interpreter begins to execute lines of code. (All this means is that before your code begins to execute line by line, the javascript engine already kept aside from the memory space(created at Creation phase) for variables that u declare in your entire code and all the functions as well).
Now, let us see in the action🏃♂️with an example:
Pretty straightforward: I declared a variable a and function b() and initialized some value to it.
Did you look at line number 7 giving output as “undefined”,
Hey bro Wait!!, I have declared a with the value(var a=”Hi there”) ,Why it was giving the output as undefined?
Because the javascript engine has assigned memory for the variable ‘a’ at the time creation phase and sets its value as undefined rather than its actual value and it will get initialize the actual corresponding value once the controls hit the actual line where the variable declared in the js file during the execution phase. (in this case, it’s line No 9)
So in the above code the, Js engine executes line no 7, before the actual value of that variable is being set(line no 9).
But if you observe line no 11, It was giving the actual output without any errors, its because the line sits after the variable, is get initialized its actual values(“Hi there”). This only happens with variables and not with the functions.
Conclusion:
Hope, Now you got an idea about what actually is the hoisting is, and if you have any questions, feel free to ask in the comments. We will be discussing the Scope chain and its lexical environment in the next post. Hit a like button to support🤝.
