Javascript Hoisting and Temporal Dead Zone
By Saket Bhatnagar••Beginner to Intermediate
Hoisting
- 1Hoisting is the ability of the JavaScript engine to access variables and functions before their declaration line appears in code
- 2This doesn’t mean JavaScript moves the code physically upward — instead, it creates memory blocks during the first phase of code execution
- 3JavaScript engine executes Code in two phases:
- Memory Creation Phase or Variable phase – JS engine scans the whole file and allocates memory for all variables and functions in the same squence as they appear in the code. When all memory is allocated, JS engine moves to execution phase.
- Execution Phase – JS executes code line by line and assigns values to variables.
- 4What happens in memory phase:
- Variables declared with
varare auto-initialized withundefined - Variables declared with
letandconstare not initialized with any value in memory phase and remain empty until js engine reads the declaration statement in execution phase and initialize it with the value. - In case of function, whole function code is stored in memory block. (only for functions those are declared with function keyword)
- Variables declared with
- 5Example: var Hoisting
var Example
1console.log(a); // undefined2var a = 10;💡Note
During memory phase,ais initialized withundefined. So in execution phase, whenconsole.log(a)runs, JS finds that memory block and found value undefined and printsundefined. - 6Example: let Hoisting (TDZ)
let Example
1console.log(b); // ReferenceError2let b = 10;💡Note
In memory phase,bis only allocated memory but not initialized means memory block is empty. So in execution phase,console.log(b)runs, JS finds that memory block and but memory block is empty and that's why it throws error becasue we are trying to access the memory block but nothing is stored there to be printed or logged.
Understood?. It is the time frame between memory allocation and initialization, so if we try to access memory block or variable before it is initialized, as js engine is not able to find any value to be printed or logged, js engine throws error and this is called Temporal Dead Zone (TDZ).
Why dead zone? Because we are not able to access the variable before it is initialized. - 7Example: Function Hoisting
Function Hoisting
1sayHi(); // Output: Hi23function sayHi() {4 console.log('Hi');5}💡Note
In memory phase,sayHiis stored with it's code. So in execution phase, whensayHi()runs, JS finds that memory block and found function code and calls it.
Function declarations are fully hoisted with their code in memory phase. That’s why you can callsayHi()before its declaration. - 8Interview Key Point: Hoisting = memory is ready before code runs. JS doesn’t move the code; it just prepares memory in advance.
Temporal Dead Zone (TDZ)
- 1It is the time frame between memory allocation and initialization, in this time frame we can not access the variable. If we try to access memory block (variable) before it is initialized, as js engine is not able to find any value to be printed or logged, js engine throws error and this is called Temporal Dead Zone (TDZ).
- 2Why we call dead zone? Because we are not able to access the variable before it is initialized.
- 3
let (TDZ) Example
1console.log(b); // ReferenceError2let b = 10;💡Note
In memory phase,bis only allocated memory but not initialized means memory block is empty. So in execution phase,console.log(b)runs, JS finds that memory block and but memory block is empty and that's why it throws error becasue we are trying to access the memory block but nothing is stored there to be printed or logged. - 4
const (TDZ) Example
1console.log(b); // ReferenceError2const b = 10;💡Note
In memory phase,bis only allocated memory but not initialized means memory block is empty. So in execution phase,console.log(b)runs, JS finds that memory block and but memory block is empty and that's why it throws error becasue we are trying to access the memory block but nothing is stored there to be printed or logged.