Difference between Javascript var, let and const

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

Before the advent of ES6, the var declarations was used by developers. Scope means a region where a variable is available for use. var declarations can be globally scoped or locally scoped. When a var variable is declared outside a function, the scope is said to be global and it can be accessed anywhere in the file. In the code, the variable name is 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, the variable name is accessible locally or within the function alone.

//Local or function scope
function maleName(){
var name = "Paul"
  console.log(name)
}
maleName() // Paul

Uses

• A var variable can be re-declared within the same scope and it would not return an error. This poses a great concern with using the var keyword 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 name changed 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 this code, the variable i was declared within a for loop which is a block statement, because of the non-block-scoped of var, it can still be accessible outside the for block.

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 declaration are block-scoped. In this code, the variable i was declared within a for loop which is a block statement, because of the block-scoped of let, it can not be accessible outside the for block, therefore it returned an error while trying to access it.

function sayBye(){
for( let 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 const is also one of the features which came with the ES6 version. Const declaration are block-scoped. However, they can not be redeclared and also can not be updated. In this code, the variable name can neither be updated nor redeclared as it returned an error while trying to redeclare to Michael and 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

Const is 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 car is not overwritten, however the property hasFuel was updated to false and this did not return a error.

Conclusion

Using let and const over var is a good development practice because of the numerous shortcomings of using var stated in the article.