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 Godfather
4var 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 = undefined
2movie = 'The Godfather'
3console.log('movie') // The Godfather
5movie = 'The Fast and The Furious'

yes, it is valid even if we use "use strict;".

Hoisting means, before execution of our code the interpreter will work like moving all the functions and variables declared with 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 = false
3function getMovieList() {
4 if (isUserLoggedIn) {
5 var result = 'Your movie list here'
6 }
8 return result

Before execution time what happens is,

1var isUserLoggedIn = undefined
3function getMovieList() {
4 var result = undefined
6 if (isUserLoggedIn) {
7 result = 'Your movie list here'
8 }
10 return result
13isUserLoggedIn = 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).

TDZ is the distance or period between the starting of variable's scope to its declaration. It ends when variable is declared rather than assigned.
1if (true) {
2 console.log(username) // ReferenceError
3 // some task
6let 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, whereas let and const bindings have TDZ.
  • Because of TDZ let and const variables cannot be used before their initialised.
All posts
Built with ❤️ and  Gatsby