JavaScript Variable Hoisting
Hoisting is one of the important concepts every JavaScript or its related frameworks developers should be familiar with. Ever wonder how function calls or variable access can be done even before declaring those. If that’s so then, Welcome to my explanation of hoisting.
What is Hoisting?
This is one of the most common interview questions in front end development and common answer will be All variable and function declarations are moved to top.
If this is where your head is currently. You’re mistaken. Let us discuss and clarify everything regarding hoisting in today’s post.
But google says…
If you are trying to search and learn about hoisting, almost everywhere you will be seeing the same definition. A definition that may be beginner friendly but definitely that’s not true. In JavaScript, Nothing will be moved.
What does JavaScript do when executing?
When JavaScript runs your code it actually goes through it twice. Once to allocate memory for variables and functions. This is the creation phase. The second phase is the execution phase where it actually executes code.
Variable Hoisting
Given the example below you can try to run this code and there won’t be any errors.
console.log('sampleVar',sampleVar);
var sampleVar = 'JavaScript';
console.log('sampleVar',sampleVar);The first log will show ‘undefined’, and the second will show as ‘JavaScript’. This is because no matter how we declare variables, JavaScript will always go through these lifecycles to declare a variable:
Declaration: var sampleVar;
Initialization: sampleVar = 'Javascript';
Utilization: console.log('sampleVar',sampleVar);
So in the first pass JavaScript will allocate all the memory it needs for variables and functions. This is where any declared variables will be created with the value undefined . Then in the execution phase the value will be assigned.
Another misconception of hoisting and ES6 is that variables declared with const or let are not hoisted and only var declarations are hoisted. This is not true either. What is actually happening is that var is hoisted globally and the others are hoisted in block scope.
console.log('sampleVar',sampleVar);
let sampleVar = 'JavaScript';In this example you will get an error uncaught reference error: sampleVar is not defined.
So Wtf?!
Those samples look the same?! What the hell is happening?
In comes a concept of Temporal Dead Zone.
I already hear you, what is that!?
The Temporal Dead Zone — is the time between declaring a variable and initializing a variable.
This is the exact reason that modern JavaScript has the preferred variable declaration with const and let as these variable declarations do not have any risk of leaking into other scopes, compared to the var usage. For more info on variable declarations check out the MDN article listed here.
