In this post, we are going to understand variable scope and difference between var, let and const keywords in javascript.
Variable scope is tricky concept for new developers., especially in javascript. Most of beginner developers make common mistake like defining the variable inside the function and expecting it to access outside the function.
Understanding var, let, const
var, lets and const are keyword that are used to declare variable in javascript. Var is old style of declaring variable in javascript while the let and const are latest which were introduced in ES6.
The variable can be redeclared using var keyword.
var status = “Running”
var status = “Pending”
Here the status will be over written this is the problem with var.
let clone = “Fail”
let clone = “Success”
this will throw an error because using let keyword cannot redeclared the variable.
the difference between const and let is simple.
const action = “open”
action = “close”
the above declaration will throw an error because we cannot change variable value in const (but we can change the property of object in const)
But the let variable value can be changed
let action = “open”
action = “close”
`var` is more outdated way of declaring variable
When we declare variable with var keyword its its scope is not limited to the block on which it is defined but it is limited to the scope of the function.
function PrintNum() {
for (let i=0; i<5; i++){
console.log(i)
}
}
Its output is 0,1,2,3,4
function PrintNum(){
for (let i=0; i<5; i++){
console.log(i)
}
console.log(i)
}
}
the output is error because i is not accessible outside the scope of for.
function PrintNum(){
for (var i=0;i<5;i++){
console.log(i)
}
console.log(i)
}
}
output is 0,1,2,3,4,5 because the i is declared with var keyword and it is scope is limited to function.
So from above example we can understand that var keyword created function scope variable while let, const keyword create block scope variables.
function PrintNum(){
for (var i=0; i<5; i++){
if(true){
var name = “john”
}
}}
console.log(name)
}
Now here name is accessible to out side if block. But if we have declared (let name = “john”) then it will be accessible inside the if block only.
Variable attached to window object
var varStatus = “Running”
let status = “Pending”
When we declare variable outside the function it will be global variable and this global variable will be attached to window object in browser if it is declared with var keyword. The window object is helpful while building the frontend application. Now the above varStatus will be added to window object. If we type window.varStatus in console we will get “Running”.
The problem will occur when we are using third party library. If the third party library has same property as varStatus then our global varStatus will be overwritten. Bet global variable declared with let keyword will not be attached to the window object.
Conclusion
Use let and const for declaring variable in javascript instead of var because let and const act as block scope while var act as functional scope.
