As you know, we use variables to store data in the JavaScript. There are three types we can use to store variables (var, let, and const). Let’s see the difference between them with practical examples. So you will get an idea when and where to use them.
var in JavaScript
Var is the old keyword we use to declare variables. When you want to declare a value that will keep changing in the program, you can use the var keyword.
Let’s see the example.
Output of above example.
This is a simple example of var. But there are problems with it. Let’s look at those.
Problem 1: var is Accessible Outside Scope
Note: There is a difference between the scope of function and other scopes like if-else, for loop, while loop & blank. This problem does not apply to the function scope.
if(true){
var message = "Hello JavaScript";
alert(message);
}
alert(message);
When you run the above code, you will see two back-to-back alerts with the “Hello JavaScript” message.
This is confusing for developers who had worked on languages like C# & Java. How can the message variable accessible outside if block? This is going to be error-prone and create confusion in the JavaScript code.
Problem 2: Use of var Before Declaring
In the below code, we have an alert function, and then we have declared the message variable. Let’s see the example.
alert(message); var message = "Hello JavaScript";
Output of above example.
This is weird. The above code is not throwing an error that the message variable is not being declared. Instead, it is displaying alert with an “undefined” message. It should throw an error without displaying an alert.
Suppose, if we write below code.
var message; alert(message);
Suppose you execute the above code, then you will get the same alert as an earlier example. In this case, it is right, but not in the earlier case.
Let’s see how let keyword can solve these problems.
let in JavaScript
Let is the new keyword introduced in JavaScript by looking at problems in the var keyword. It is a replacement for the var keyword. Let behaves the same as var, BUT it solves problems mentioned in the var. Let’s look at how let behaves in the problems mentioned above with var.
1: let is NOT Accessible Outside Scope
In the below code, we have just replaced var with let for Problem 1 (see the var section above) code.
if(true){
let message = "Hello JavaScript";
alert(message);
}
alert(message);
In the above example, you will see an alert message for alert inside if statement. You will not see an alert for the second alert outside if statement because let throws the following error in the console for the second alert. It is correct because the message variable declared inside if statement, and it should not be an accessible outside block of if.
Below is the error in the console.
2: let CAN’T be Used Before Declaring
Let’s see how let behaves in Problem 2 (see the var section above). We have just replaced let with var.
alert(message); let message = "Hello JavaScript";
The above code will throw an error in the console. You’ll not be able to see the alert message and this is correct.
This is how let solves problems in the var keyword. It is very good practice and recommended to use let instead of var.
const in JavaScript
Const is similar to let keyword BUT with two differences.
1: Compulsory to Initialize const Variable
Like var & let you cannot leave const keyword uninitialized, for example.
const message; message = "Hello JavaScript"; alert(message);
The above code will throw an error in the console because we have not initialized value when we have declared a const variable. At the next line, we have declared, but that is not acceptable. It has to be on the same line.
Above code will throw an below error.
Correct Code is below.
const message = "Hello JavaScript"; alert(message);
2. const CAN’T be Reinitialized
Once you have initialized (given value) to the const variable, then you can’t reinitialize (Can’t change or alter) it. Let’s see the below example.
const message = "Hello JavaScript"; message = "Hello Tutorial Funda"; alert(message);
The above code will throw an error in the console.
You have to initialize the value to the const at the time of declaration only. You can use a constant value like pi (3.14), days in a week (7), the number of months in a year (12) with const.
That’s it. We hope that you got the clarity of using var, let & const.