let and const

these variables were introduced in ES6 as the old var is getting old... Now.. these let and const were block scoped variables unlike var which is global scoped.

      var scope = 'global';
      var ifTrue = true;
      if (ifTrue) {
         var scope = 'block'; 
      }
      console.log(scope); // This prints block
       let scope = 'global';  
       let ifTrue = 'true';
       if (isPass) {
          var scope = 'block'; 
      }
       console.log(scope); // This prints global

Errors

The difference between let/const and var is the cause of temporal dead zone which occurs when you access var variables even before they’ve been declared.

Accessing non-declared var variables gives an undefined value and does not cause any error. Whereas when accessing non-declared let and const variables gives reference error, it’s because of temporal dead zone.

console.log(varVariable); // undefined, but no error
var varVariable = 20;


console.log(letVariable); // it throws a ReferenceError letVariable is not defined

let letVariable = 20;

Temporal dead zone

A temporal dead zone is a state when variables are in scope but they are not reachable and they are yet to be declared.

{
     // temporal dead zone for the marks variable!
    let marks = 20; // TDZ ends here
    console.log(marks);
}

Using var this situation never arrives because var’s are by default initialized to undefined.

Declaration and initialization of let/const and var

There are two steps in the creation of variables, declaration, and initialization. When declaring a variable we reserve the variable name in the memory at the corresponding scope. In initialization, we set the value of the given variable. Declaring and initializing var variables is very flexible, we can re-declare it as many times the latest declaration will overwrite the previous declarations and when using un-declared var variable it gives the value of undefined.

We cannot re-declare let and const variables in the same scope it gives syntax error, and if we use un-declared let and const variables js engine will give reference error, this is because of the Temporal Dead zone.

Temporal dead zone only occurs with let and const variables.

Why temporal dead zone?

The reason temporal dead zone exists between the top of the scope till the variable declaration is hoisting. When javascript program runs javascript engine has 2 important steps to follow:

Compilation: Javascript engine compiles the code into byte code. In this step, hoisting occurs.
Execution: Starts the run time execution. While hoisting, javascript engine will move all variable declarations to top of the scope.

console.log(letVariable)//gives reference error but still gets hoisted
let letVariable = 0;
var varVariable = 100;

Conclusion

Temporal dead zone might sound confusing but it is not, understanding variables, scope initialization and declaration makes it easy to learn about temporal dead zone. To avoid temporal dead zone we can declare let and const variables at top of their scope.

Temporal Dead Zone