Do you know that before ES6(2015) , JavaScript had only global scope and function scope and for declaring a variable we can use var keyword .

In 2015 ES6 introduced two new keywords : let and const. In this blog we will discussed more about these keywords and also we will get answer of some of questions related with let and const like-

1. What is temporal dead zone ?
2. Are let and const declarations hoisted ?
3. SyntaxError vs ReferenceError vs TypeError ?

and many more.

Let and const declarations are hoisted .

Before we move forwards , the question is What the heck are hoisting means ?

In the article of w3schools.com , it says that Hoisting is JavaScript's default behavior of moving declarations to the top. In JavaScript, a variable can be declared after it has been used. In other words; a variable can be used before it has been declared.

=> Example 1 gives the same result as Example 2:

Example 1

x = 10; // Assign 10 to x

console.log(x); // displaying value of x

var x; // Declare x

Example 2

var x; // Declare x

x = 10; // Assign 10 to x

console.log(x); // displaying value of x

This is what hoisting is ! Any variable which is defined with var keywords can be initialized at any time

Meaning: You can use the variable before it is declared: for example -

myName = "shahid" ;

var myName;

But ,

Variables defined with let and const are also hoisted to the top of the block, but not initialized.

Meaning: The block of code is aware with variable ,but we can't use that variable until it's declared

In case of let : It resulted in Reference Error

for example :

myName = "shahid" ;

let myName;

In case of const : It resulted in Syntax Error

The variable is in a "temporal dead zone" from the start of the block until it is declared:

Temporal dead zone in JavaScript

In simple words , Temporal dead zone is a time since when this let and const variables are hoisted till it is initialized some value .

1. console.log(a)

2. let a = 10 ;

In line number 1 , variable are hoisted that means a was hoisted , it was assigned a memory space with value : undefined , but it is not initialized . This phase known as "temporal dead zone until when program execute line number 2 that's where temporal dead zone ends and value 10 will put inside the variable a.

SyntaxError vs ReferenceError vs TypeError

In the above section we had discussed about the SyntaxError and TypeError ,

so now we are going to talk about TypeError and also we will cover all Errors in depth.

SyntaxError .

Example 1.

It resulted in Syntax Error because const keyword expect some value in it.

Example 2 .

It resulted in syntax error , because you cannot declare two variable in let keyword in same block { } scope

ReferenceError

When JavaScript engines tries to find an specific variable inside the memory space and can't access it. This resulted in Reference Error.

Example 1.

When I tries to access variable a before I initialize it .

It resulted in ReferenceError because in this time of period a is in temporal dead zone.

Example 2.

In this example when JavaScript engines tries to find variable x

It resulted in Reference Error because variable is not defined.

TypeError

If we assign assign some other value into variable after assign same variable with const keyword . It resulted in type Error

Example 1.

In this example you will get TypeError because variable 'b' is a constant variable and later on In line 4 you are assigning some data on same variables . so it reflect TypeError.

The main difference between let and const.

Let and const declaration are hoisted but it cannot be used until it has been declared.

This is the one of common things in let and const but what are the difference between them ?

To understand difference between let and const . Lets take a example.

In case of let

we are declaring the variable with let in line 1 and later on initializing in line 5. It will reflect both value in console without any error.

But What if we use same case with const variable ?

it resulted in syntax error ,because you are missing initializer in const declaration.

Conclusion

This is it on this article about let and const . There are some more related topic you can go through for example - how to avoid temporal dead zone ,block scope of let and const and many more.