Overview: Did you know that JavaScript read your code not once, but twice. In the first read it scans all the variable and function declarations and allocate memory for all of them and no matter wherever it is declared, those declaration moves to top of their current scope before the code starts getting executed. This is called Hoisting
What do I mean by JavaScript read my code not for once, but twice?
JavaScript follows two phase processing model for executing code.
Memory creation phase: In this phase the JS engine scans the entire codebase before executing anything it allocates the memory for all the variable and function declarations. var in declared as undefined, let & const are uninitialised. In function declarations the entire function body is stored in memory.
Code Execution Phase: This is when JavaScript engine executes code line by line. During this phase actual values are assigned to the variables that were stored in memory earlier as undefined or uninitiated.
Hoisting means you can sometimes use variables and functions at top even if those variables and functions are declared at the end of the code.
Hoisting is JavaScript's default behaviour of moving the declaration to the top before execution due to it's two phase processing.
Let's have a look at Hoisting of Variables:
Hoisting of variable
Hoisting of "var" keyword:
In the above case, var a- The declaration is moved to the top because of the JS two phase processing. In the memory creation space the code block has scanned for all the variables present in it are allocated a space in the memory whose value is automatically saved as undefined.
The value which we assigned to the variable stays exactly where we wrote it, its just that the memory has the variable stored in it.
Now in the code execution phase the codeblock checks the code line by line and executes it.
same case with the var b = 2. First the memory saves b = undefined and then when the code is being executed it will assign the value 2 to the variable b.
In case of let and const
These variables are also hoisted but they are not initialised. Instead, they are placed in a state called Temporal Dead Zone. Any attempt to access them before their actual declaration line in the code will result in a ReferenceError.
What is Temporal Dead Zone here?
It's always a mistake to try & use a variable before it has been explicitly declared & assigned a value. Hence why Temporal Dead Zone was introduced, where let and const variables are also hoisted (The engine knows that these variables exists in code while memory allocation phase) but they are deliberately not initialised.
When JS engine scans a codeblock and if it finds let & const declarations, It creates a binding (the association between the variable name and a memory location) for the variable.
During the execution phase - If during execution, it encounters a line that tries to occur let or const variable before its declaration line is reached, the engine checks if the variable is in Temporal Dead Zone. If it is found, it immediately throws a ReferenceError.
Once the engine reaches the actual let or const declaration line, then the variable is initialized & it is also removed from Temporal Dead Zone, from this point onwards it can be accessed normally within its scope.
Top comments (0)