Let's understand variable types "var", "let" and "const" in Javascript.
Basically there are 3 ways to create variables in java script using 3 keywords as follows.
There differences are as follows,
01. The "variable01" which was created with "var" keyword, does not have a blocked scope. which means, you have to be careful when using it. A variable declared inside an "if" block can be changed outside the block.
02. The "variable02" which was created with "let" keyword, has blocked scope. A variable with "let" keyword declared inside an "if" block is not available outside the block.
03. The "variable03" which was created with "const" keyword, is a constant. Which means you have to initialize it once you declare it, and that value cannot be modified later in the programs. There will be an error if you try to do so.
Now lets explore the above statements with example codes.
Say that you have declared the variable as follows.
- A constant value
- A "var" variable called "varValue" declared inside an "if" block.
- The "varValue" variable is incremented to 20 using a "for" loop.
- A "let" variable inside a another "if" block. (nested "if" block).
Note that you get an error like this if you do not initialize the "const" variable.
You can print out the "letValue" inside the if block.
But just outside the if block, it gives an error, because "let" variables has blocked scope.
But "var" variables does not have blocked scope. So the variable "varValue" and even the variable "i" inside the for loop, is available outside the "if" block.
This does not mean that a "var" variable declared inside a function block is available anywhere. Let's define two functions as follows.
Note that I am trying to print out the "someValue" variable as if it is inside the "varDemo" function, assuming that because the "var" variables does not have a block scope, this will print out fine. But when I call the function, it gives this error.
So please don't confuse yourself! .... The "var" variables has function scope but not blocked scope.
Finally if you try to change the value of the "cosnt" variable later in the program like this,
Javascript will give you an error.
Lets hope this is clear enough. Please copy the following code and play around. Use chrome and its development tools to see the errors and "console.log()" values.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
const constValue = 'constatnt Value' ;
if(true){
var varValue = 10 ;
for (var i = 1; i <= 10; i++) {
varValue++ ;
}
if(varValue == 20){
let letValue = varValue * 2 ;
// console.log(letValue);
}
// console.log(letValue);
}
console.log(varValue); // Print out 20
console.log(i); // Print out 10
// varDemo() ;
constValue = 'Changed Value' ; // Uncaught TypeError: Assignment to constant variable.
// Conclusion
// "var" does not have blocked scope. That is why it is available even outside the if block
// "let" is same as "var, but has blocked scope. It is not available outside the if block
// "const" is constant with its initial value. You cannot change it's value after initialization
function varValue(){
var someValue = 10 ;
}
function varDemo(){
console.log(someValue) ;
}
</script>
<title>Var vs Let vs const</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
const constValue = 'constatnt Value' ;
if(true){
var varValue = 10 ;
for (var i = 1; i <= 10; i++) {
varValue++ ;
}
if(varValue == 20){
let letValue = varValue * 2 ;
// console.log(letValue);
}
// console.log(letValue);
}
console.log(varValue); // Print out 20
console.log(i); // Print out 10
// varDemo() ;
constValue = 'Changed Value' ; // Uncaught TypeError: Assignment to constant variable.
// Conclusion
// "var" does not have blocked scope. That is why it is available even outside the if block
// "let" is same as "var, but has blocked scope. It is not available outside the if block
// "const" is constant with its initial value. You cannot change it's value after initialization
function varValue(){
var someValue = 10 ;
}
function varDemo(){
console.log(someValue) ;
}
</script>
<title>Var vs Let vs const</title>
</head>
<body>
</body>
</html>
Comments
Post a Comment