In our previous blog, we have discussed what is scope, Hoisting, and var
keyword in Javascript.
Let's go further and discuss let
and const
keywords.
Problem with var
let's discuss the below example to understand the problem with var
{
function anyFn(){
var message = 20;
}
var message = "hello";
anyFn();
console.log(message); //20 Wait!! What??
}
'message' is defined globally in the above code block, which means it has global scope. The 'anyFn' function will redeclare the variable and reassign it with a new value. This is not a major issue when a developer is doing it knowingly, but what if the developer doesn't realize it which may cause bugs in the code.
In Javascript, it is good to not declare variables as global variables. Because of the global scope, it is possible that global variables can be changed from anywhere in the program. Think about the large complex programs where multiple teams are working on a common module. To prevent this, one needs to ensure that the scope of the variables is limited to the code block within whey they need to be accessed.
This is where let
and const
come into play.
let
The scope of the variables defined with the let keyword is limited to the code block within which they are defined. They are block-scoped.
{
function anyFn(){
let message = 20;
}
let message = "hello";
anyFn();
console.log(message); //"hello"
}
Why?
Because let message = 20;
and let message = "hello";
are two separate variables because there scope is different.
- Like
var
, variables declares withlet
keyword can be reassigned within the scope.let a = 10; a = 20;
- Unlike
var
, variables declares withlet
keyword cannot be redeclared within the scope.let a = 10; let a = 20; // Error: a has already been declared
- Just like
var
,let
variables are hoisted at the top.let
variables won't be initialized likevar
variables with the undefined value. So if we try to uselet
variables without initialization we will get an error.
const
const
variables are also code blocked variables and they maintain a constant value.
const
variables cannot be redeclared and reassigned. They should be initialized at the time of declaration.- Like
var
andlet
,const
variables are also hoisted at the top but won't be initialized.
Important fact about const
const
values cannot be re-assigned but they are not immutable. Please check below code block
{
const a = "test"; //string
const b = 0; //number
const c = [4,5]; //array
const d = {name: 'raj'}; //object
For the following code, we will get this error:
//Error: This is an attempt to reassign variable a to different value.
a = "test2";
b = b++;
c = [4,5,5];
d = {name: 'raj'};
d.address = "xyz";
Below code will not throw and mutate the variable
c.push(5); // This will push 5 into the array. [4,5,5]
d.name = "Simran"; //this will update the name inside d object.
}
Summary
Keyword | Scope | Redeclared | Reassigned | Hoisting value |
var | Functional | ✅ | ✅ | undefined |
let | Block | ❌ | ✅ | Not initialized |
const | Block | ❌ | ❌ | Not initialized |