var, let and const in detail with hoisting
Photo by Patrick Fore
Hoisting in function scope
Javascript's execution context has two phases. Creation phase and Execution phase. Hoisting happens at the creation phase.
Hoisting means that the interpreter will move the instantiation of function or a variable declared with var
to the top of the scope in which they are declared, regardless of where in that scope they are declared in. As var
declared variables and functions are hoisted in javascript, they can used before where they are declared.
1movie = 'The Godfather'2console.log('movie') // The Godfather34var movie = 'The Fast and The Furious'
The above snippet is totally valid. Here what happens inside the interpreter is that, initially var movie
is moved to the top of the file during runtime and it is initialised with undefined
. And later the assignment statement is executed.
1var movie = undefined2movie = 'The Godfather'3console.log('movie') // The Godfather45movie = 'The Fast and The Furious'
yes, it is valid even if we use "use strict;"
.
var
to the top of their scope and the variables will be initialised with undefined
whereas the functions are completely taken into memory. It is a process of memory allocation and our code will be there itself where we wrote it, and it wont be moved lexically to top.1var isUserLoggedIn = false23function getMovieList() {4 if (isUserLoggedIn) {5 var result = 'Your movie list here'6 }78 return result9}
Before execution time what happens is,
1var isUserLoggedIn = undefined23function getMovieList() {4 var result = undefined56 if (isUserLoggedIn) {7 result = 'Your movie list here'8 }910 return result11}1213isUserLoggedIn = false
As shown in line 5, variable result
has moved to top of the scope in which it is declared and initialised to undefined
. Hence we won't get error at line 10.
TDZ in block scope
In javascript let
and const
variables are not hoisted. Meaning, during the time of execution these variables are not floated to top of their scope. Hence they are accessible only after they are declared. What if we try to access them before they are declared? there comes Temporal Dead Zone (TDZ).
1if (true) {2 console.log(username) // ReferenceError3 // some task4}56let username = 'The_names_Bond_James_Bond'
In this snippet, lines from 1 to 5 is the TDZ for username
variable. In this zone the variable username
is not undeclared, it is uninitialised.
The reason behind the existence TDZ was const
. const
variables cannot be reassigned. If const
variables are hoisted, at first they will get initialised to undefined
and later the time of execution they will be reassigned to the given value. This is against the rule of const
. Hence they introduced TDZ for const
variables and they gave it for let
the same to avoid using variable before declaration.
Take aways
- Hoisiting is the term to denote javascript execution context's creation phase.
var
bindings follow hoisting, whereaslet
andconst
bindings have TDZ.- Because of TDZ
let
andconst
variables cannot be used before their initialised.