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
3
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
4
5movie = 'The Fast and The Furious'

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

1var isUserLoggedIn = false
2
3function getMovieList() {
4  if (isUserLoggedIn) {
5    var result = 'Your movie list here'
6  }
7
8  return result
9}

Before execution time what happens is,

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

1if (true) {
2  console.log(username) // ReferenceError
3  // some task
4}
5
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.