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

3 years ago | 2 min read

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.

Software Engineering

Programming

Upvote

Created by

Mary Okosun

Software Developer, Technical Writer