With ES6 coming out in 2015, it came with a number of features. One of them was the addition of let and const. With these features coming in light and replacing the var keyword. The question arises here that what is the difference these new features are having.

In this article, we will be discussing about var, let and const along with their uses, scope and their differences.

var

Before ES6, var keyword was used to declare variables in JavaScript. With var, there are many issues which were solved by let and const. Let talk about the var first and then we will talk about its issues.

Using var is really simple. It should come before you write the variable name.

var *variable_name*

Scope of var:

var is global/local scoped. One can also say that it is function scoped, that means the variable declared and assigned within a function(locally) can be used within that function only.

function fruitName(){
var fruit = "Apple";
console.log(fruit)   // Apple
}

console.log(fruit);   //error: fruit is not defined

When declared globally, var keyword can also be used as a window Object.

var fruit = "Apple";  // can be used as window.fruit

var can re-declared and re-assigned:

var fruit = "Apple";
var fruit = "Orange";

console.log(fruit);   // Orange

var fruit = "Apple";
fruit = "Orange";

console.log(fruit);   // Orange

Issues with var:

var fruit = "Orange";
if(true){
var fruit = "Banana";
console.log(fruit);  //Banana
}

console.log(fruit);  //Banana

This can cause problem while fixing bugs in the code (also, it is better not to use same name for variable which has been used but if necessary its better to use let for the particular block).

Today, it is preferred to use let/const instead of var because of its problem of scope.

let

Today, let have replaced var. let, too is simple to use.

let variable_name

Scope of let:

Rather than being global or local scoped, let is block scoped i.e. anything within { } these brackets, is a block. It works similar to var when used inside a function.

function fruitName(){
let fruit = "Apple";
console.log(fruit)   // Apple
}

console.log(fruit);   //error: fruit is not defined

When declared globally, let keyword cannot be used as a window Object.

let fruit = "Apple";  // cannot be used as window.fruit
// will give undefined as output

let cannot be re-declared but can be re-assigned:

let fruit = "Apple";
let fruit = "Orange";

console.log(fruit);   // Uncaught SyntaxError: Identifier 'fruit' has already been declared

let fruit = "Apple";
fruit = "Orange";

console.log(fruit);   // Orange

Solving issues with var:

let does not leak things out of the block and that's how it solve the issue with var.

let fruit = "Orange";
if(true){
let fruit = "Banana";
console.log(fruit);  //Banana
}

console.log(fruit);  //Orange

const

const is short form for the constant variable. const is used to create variables that are not required to be reassigned. It share many similarities with let. The only difference const has is that it should be assigned when declared and cannot be reassigned later.

const fruit= "Orange";
fruit = "Apple";  //Uncaught TypeError: Assignment to constant variable

Scope of const:

Like let, const is also block-scoped.

const cannot be re-declared and re-assigned. As shown above the variable cannot be re-assigned, it can't be re-declared either.

const fruit= "Orange";
const fruit = "Apple";    //Uncaught SyntaxError: Identifier 'fruit' has already been declared

Important:

const is name for constant variable but it doesn't create immutable values i.e. the values can't be re-assigned but can be mutated, such as properties of an object can be mutated but the whole object cannot be re-assigned.

const fruitObject = {
  fruitName: "Apple",
  color: "red"
}

Neither re-assignment:

fruitObject = {
  fruitName: "Banana",
  color: "yellow"    //TypeError: Assignment to constant variable.
}

nor this:

fruitObject = {
quantity: "1kg"   //TypeError: Assignment to constant variable.
}

but can be Mutated:

fruitObject.fruitName = "Orange";

One can also change the values of array or push something to the array, similarly to the objects properties and it doesn't throw an error.

Summary

• var is Global Scoped, whereas let and const are Block Scoped.
• var can be re-declared and re-assigned, let can be re-assigned only and const can neither be re-declared noir re-assigned.
• var and let can be initialized later on but const must be declared and initialized in the same line.

Happy Learning!!