JavaScript: let and const and temporal dead zone (TDZ)

JavaScript: let and const

let and const is used to declare a variable in javascript. Before let and const we had the only var to declare javascript variable. So what's different between var and let and cont. let's see with some examples -

Ver - 

Whenever we define a variable using ver, it's available globally into a  function. 

function anyFunction(isChange) {
    if (isChange) {
        var result = 'change';
        console.log(result);
    } else {
        console.log(result);
    }
}
 
anyFunction(false);

Here console output will be undefined without any error. the variable result is defined in the if block but it is also available in the else block. that's the problem with ver, it is not bounded with blocks. its scope is global because of the Hoisting process of javascript. In the javascript hoisting process, the variable declarations using var are put into memory during the compile phase, but stay exactly where you typed them in your code. let's see some other examples of var -

console.log(number);
var number;
number = 5;

The console output of the above example will be undefined. In the javascript hoisting process, only variable declarations put into the memory. The hoisting process does not change variable initialization.

Let - 

Now let's see all the examples again with the let keyword - 

function anyFunction(isChange) {
    if (isChange) {
        let result = 'change';
        console.log(result);
    } else {
        console.log(result);
    }
}
 
anyFunction(false);

Previously we were getting undefined output but this time we are getting an error while using let instead of ver. 

Uncaught ReferenceError: result is not defined

If we declared a variable using the let keyword, its scope is bound to blocks. In the above example variable result is declared in the if block so it is not available in the else block. It is also known as the temporal dead zone (TDZ) in javascript.

console.log(number);
let number;
number = 5;

Same error in the second example, here we are using a variable before its declaration.

Uncaught ReferenceError: number is not defined

So now the question is when to use var and when to use let?

The main difference between var and let is the scope of the variable.  So when you need a variable for a local scope like in a loop, if-else, or in switch we should let keyword. Normally we should avoid variable declaration using var. we should replace var with let.

const -

Variable declaration using let and const are very similar. There is only one difference between let and const and it is variable initialization. we cant remonetization a variable if it is declared using the const keyword.

Let's see some examples - 

let language = 'Java';
language += 'Script';
console.log(language);

The console output of the above example will be 'JavaScript'. Here first we declare a variable and initialize it with string 'Java',  in the second-line we have re-initialized the variable.

Now let's see the same example using the const keyword - 

const language = 'Java';
language += 'Script';
console.log(language);

This time we got an error - Uncaught SyntaxError: Identifier 'language' has already been declared

We are getting this error because we are trying to re-initialize a const variable. 

Summery -

let and const are bounded to local scope. We should use the let keyword instead of var and whenever we have a constant value, we should use the const keyword.