Difference between Javascript var, let and const
Understanding the concepts behind using the var, let and const variables with respect to their scope and use.
Mary Okosun
In this article, we will understand the difference between var, let and const with respect to their scope and use. These statements are used to declare a variable.
Variables are containers for storing information. Creating a variable in JavaScript is called "declaring" a variable.
Scope of Var
Scope means a region where a variable is available for use. Before the advent of ES6, the var declarations was used by developers. The vardeclarations can be globally scoped or locally scoped. When a varvariable is declared outside a function, the scope is said to be global and it can be accessed anywhere in the file.
In the code below, the variable nameis accessible globally.
var name = "Peter"console.log(name) // Peter
However, when a var variable is declared within a function, the scope is said to be local or function scoped and it can only be accessed within that function.
In the code below, the variable name is accessible locally or within the function alone.
//Local or function scopefunction maleName(){var name = "Paul"console.log(name)}maleName() // Paul
Uses
- A varvariable can be re-declared within the same scope and it would not return an error. This poses a great concern with using the varkeyword because if we declare another variable using the same name inside the same scope, the new variable will replace the old one. In the code, the variable namechanged when it is redeclared to Andrew and changed when it is updated to Cole.
var name = "Daniel"var name = "Andrew"console.log(name) // Andrew
name = "Cole"console.log(name) // Cole
- Another issue is the fact that the var variable is not block-scoped, therefore assigning a variable using the var keyword in conditional statements makes the variable also available outside the scope of the block.
In the code below, the variable iwas declared within a forloop which is a block statement, because of the non-block-scoped of var, it can still be accessible outside the forblock.
function sayBye(){
for(var i = 0; i < 10; i++){
console.log("Bye") // This would console Bye 10 times
}console.log(i) // This would return 10}
Scope of Let
The addition of let is one of the features which came with the ES6 version. They can not be redeclared but they can be updated. In this code, the variable name can be updated but it returned an error while trying to redeclare to Michael.
let name = "Peter"console.log(name) // Peter
function maleName(){let name = "Paul"console.log(name)}maleName() // Paul
let name = "Michael" // Error because it can not be redeclared
name = "Joshua"console.log(name) // Joshua because it can be updated
let declarations are block-scoped. In the code below, the variable iwas declared within a forloop which is a block statement, because of the block-scoped of let, it can not be accessible outside the forblock, therefore it returned an error while trying to access it.
function sayBye(){for(var i = 0; i < 10; i++){console.log("Bye") // This would console Bye 10 times}console.log(i) // This would return an error}
Scope of Const
The addition of constis also one of the features which came with the ES6 version. Constdeclaration are block-scoped. However, they can not be redeclared and also can not be updated. In this code, the variable namecan neither be updated nor redeclared as it returned an error while trying to redeclare to Michaeland update to Joshua
const name = "Peter"console.log(name) // Peter
function maleName(){const name = "Paul"console.log(name)}maleName() // Paul
const name = "Michael" // Error because it can not be redeclared
name = "Joshua"console.log(name) // Error because it can not be updated
Constis also used for objects and array variables. These variables cannot be overwritten however the properties can be changed and updated.
const car = {name: "Honda",color: "Red",hasFuel: true}car.hasFuel = false
console.log(car.hasFuel) // false
In the code above, the caris not overwritten, however the property hasFuelwas updated to false and this did not return a error.
Conclusion
Using letand constover varis a good development practice because of the numerous shortcomings of using varas stated in the article.
Upvote
Mary Okosun
Software Developer, Technical Writer

Related Articles