In Javascript, we had only one keyword to declare variables and it was var, but in ES6 (ECMAScript 2015) JavaScript introduced two new keywords to do the same thing which is let and const. Now the question is why did they feel the requirement of these two keywords? What was the problem with var? How these new keywords are different from the previous one? and how are they even different from each other? Don't worry, I'm here to answer all these questions. So get ready with your text editor and learn something interesting!!

Before jumping into this part I advise you to get a basic knowledge of how Hoisting works in JavaScript.

🟥 Var:

When we run a code in a JS engine, the first thing that happens is a global execution context gets created, and then the hoisting part gets started. All variables declared with var in the code get a space allocated in the memory and get stored in the global object with its default value undefined(Note: Till now the execution of code is not started ). Now it will start executing the codes line by line.

As we have seen that the variables are stored with their default value in the global object even before the first line of code started executing, can we print the value of that variable in the first line of code and after that declare the variable? It should work because Javascript knows the variables declared in the last line of code even before executing the first line, right? And the exciting thing is that it really does print the default value of the variable even if we declare the variable later.

console.log(fact);

var fact = "JavaScript is fun!"

//Output: undefined

[NOTE: If you are still thinking that why it is printing "undefined" instead of "JavaScript is fun!", then read this article about Different Behaviours of Variable Hoisting and Function Hoisting]

Now the problem with var is sometimes this property of var creates some unexpected errors. To avoid that kind of situation, ES6 came with two new keywords:

🟢 Let and Const:

Just like the previous one, Javascript also allocates memory and stores the variables declared with let or const with the default value undefined, BUT not in the global object, it stores these variables in a different place called "script" and thus it is not accessible before declaring. So during the period when the code started executing but not executed the line where the variable is defined, this variable is stored but not accessible. This period is called temporal dead zone. var does not have this temporal dead zone, only let and const have. The following examples will help you to understand it better:

Eg. 1: Here we tried to print the variable before declaring and got an error as expected. But the interesting thing is the error message, it says "Cannot access 'language' before initialization". It means though we can't access the variable before initialization, still it knows that there is a variable named "language" available even before reaching the line where we declared it. This proves the point that before starting to execute the code, JavaScript stored the variable "language" but here we can't access it as we did in the case of var.

console.log(language) 
let language = "JS"

//ReferenceError: Cannot access 'language' before initialization

Eg. 2: In this example, we have declared but did not define the variable before printing it. So the interpreter knows that there is a variable named "language" in the code but can't fetch its value, thus showing the default value as undefined.

let language;
console.log(language)
language = "JS"

// Output: undefined

Eg. 3: Here we have properly declared and defined the value of the variable before printing it, so this time we are getting the proper output.

let language = "JS"
console.log(language);

// Output: 'JS'

🔵 Difference between Let and Const:

The working of let and const is almost the same but there are some minor differences between them. Unlike let we can't assign or reassign the value of the variable later. We can only assign the value once when we are declaring it.

Hope this article has helped you to understand the difference between let var and const. Please share your feedback below. Happy coding!!