With ES6, two very important ways to declare a variable were introduced, let and const. These were introduced to replace var which was previous standard way of declaring a variable.
Although by definition let and var are functionally similar. They are interpreted differently in some ways.
Temporal Dead Zone
The area of code before the variable is initialized by let or const is called Temporal Dead Zone (TDZ)
let a = 1;
console.log(a);
This concept is introduced with let and const and is not applicable for var
If we try to access a variable declared using let or const before it is initialized returns a Reference Error. This is because of TDZ.
console.log(a);
let a = 1;
Where as for var, the console returns undefined
console.log(a);
var a = 1;
Scope
There are three types of scopes in JavaScript. Global Scope, Function Scope and Block Scope.
Block Scope is relatively new, and is introduced with ES6, let and const
Global Scope is the scope of the file/program. Once declared in Global Scope, the variable can be accessed anywhere in the file/program. (Ofcourse, exception is TDZ in the case of let and const)
let num = 1;
{
let n = 2;
num = n + num;
console.log(num);
}
console.log(num);
But if num is in TDZ...
let num = 1;
{
let n = 2;
let num = n + num;
console.log(num);
}
console.log(num);
Block Scope is the code between { }
Let's try the above code with var
var num = 1;
{
var n = 2;
var num = n + num;
console.log(num);
}
console.log(num);
Function Scope is the scope inside a function.
let num = 1;
function addNum(n) {
num = n + num;
return num;
}
console.log(addNum(2));
console.log(num);
The above code works because num is the declared in the Block of file/program.
let num = 1;
function addNum(n) {
let num = n + num;
return num;
}
console.log(addNum(2));
console.log(num);
Let's try the same examples with var
var num = 1;
function addNum(n) {
num = n + num;
return num;
}
console.log(addNum(2));
console.log(num);
var num = 1;
function addNum(n) {
var num = n + num;
return num;
}
console.log(addNum(2));
console.log(num);
The num inside the function is being refernced before it's declaration, but since var doesn't have TDZ, it is initialized as undefined when it is hoisted. So when the function is called undefined is added to 2 and returns NaN
If you notice, When num is declared with var inside a function, the num outside the function is not used. But when num is declared with var inside a block, the num outside the block is used. This is because var is Functional Scoped, not Block Scoped.
Whereas when num declared with let, it throwed "Reference Error" when num is accessed before initialized, because of TDZ and because let is Block Scoped
Hoisting
All the variables and functions in a JavaScript program are hoisted, i.e., a memory location is allocated to the variables and functions according to thier scopes.
Although let and const are hoiseted, a value is not assigned until a value is assigned to the variable creating TDZ in between.
