Difference between var, let, and const

Introduction

Hello beautiful people! This article is all about var vs let vs const. At the end of this article you will be knowing:-

1. Variable Declaration and Initialization

2.Functional Scope and Block Scope

3.Hoisting

4.Difference between var, let, and const (obviously)

Variable Declaration and Initialization

The creation of a variable is called declaration of that variable.

var name;
let num;

Variables are initialized with the value of undefined when we create them. So it means when we log the variable name, we will get undefined;

console.log(name); //undefined
console.log(num); //undefined

Let's come to variable initialization. Variable initialization is when we first assign some value to the variable.

name = ‘Pika Pika’;
num = 70;

Functional Scope and Block Scope

The scope is JS determines the area of availability of variables. There are two types of scope -Function Scope and Block Scope.

If a variable created with var is declared inside a function, we say the variable is Function scoped because this variable can only be accessed inside the function or nested function.

If we try to access the variable outside the function it will give a reference error.

function pikachu(){
   var name = 'Pika Pika';
   return name;
}
pikachu();
console.log(name); //Refrence Error

So we tried to access the variable name outside the function it was declared and that is why we got a reference error. The variable name is scoped to the function pikachu and so it is only available inside that function or any nested function. Let’s see an example

function pikachu(){
   var pokemon = 'Pika Pika';
   function getPokemon(){
    return pokemon;
   }
   
   return getPokemon();
}
pikachu();
console.log(pokemon); //reference error

Let’s take another example

function increaseMarks(marks){
  var marksArraay = [];
  for(var i=0; i<marks.length; i++){
     var finalMarks = marks[i] + 10;
     marksArray.push(finalMarks);
  }
  console.log(i);//3
  console.log(finalMarks);// 40
  return marksArray;
}
increaseMarks([10, 20, 30]);

You must be thinking that we declared variable i, finalMarks inside the for loop but still we are able to access it outside the loop. Well, it’s because the variables declared with var, are function scoped. But accessing these variables outside the loop doesn’t add any good and in some cases, it can cause harm.

In the later section, we will see the solution for it, and thus we will see the concept of block scope.

Hoisting

Hoisting means the JS engine will move all the variable declarations at the top of the code. In the case of variable declared using var, it will assign a default value of undefined but in the case of let and const, it does not hoist the variable. Let’s see some examples

console.log(num); // undefined 
var num= 1;

We are logging the variable num before its declaration but it's not giving any error because the JS engine moves the variable at the top and set undefined into the variable. JS engine converts the code into -

var num;
console.log(num); // undefined 
num = 1;

Using let keyword

console.log(num);
let num= 1;

JS throws the following error

“ReferenceError: Cannot access ‘num’ before initialization

Let’s move to our previous example(with var)-

function increaseMarks(marks){
  var marksArraay = [];
for(var i=0; i<marks.length; i++){
     var finalMarks = marks[i] + 10;
     marksArray.push(finalMarks);
  }
  console.log(i);//3
  console.log(finalMarks);// 40
return marksArray;
}
increaseMarks([10, 20, 30]);

JS engine converts it into-

function increaseMarks(marks){
  var marksArraay = undefined;
  var i = undefined;
  var finalMarks = undefined;
  marksArraay = [];
  for(i=0; i<marks.length; i++){
     finalMarks = marks[i] + 10;
     marksArray.push(finalMarks);
  }
  console.log(i);//3
  console.log(finalMarks);// 40
return marksArray;
}
increaseMarks([10, 20, 30]);

var vs let vs const

First, let's compare var and let.

1. var is function scope

2. let is block scope

Let’s look back to our previous example one last time.

function increaseMarks(marks){
  var marksArraay = [];
for(var i=0; i<marks.length; i++){
     var finalMarks = marks[i] + 10;
     marksArray.push(finalMarks);
  }
  console.log(i);//3
  console.log(finalMarks);// 40
return marksArray;
}
increaseMarks([10, 20, 30]);

We are able to log variable i and finalMarks outside the for loop since they are declared with var and var is function scoped. But what if we try to run it using let instead of var??

function increaseMarks(marks){
  let marksArraay = [];
for(let i=0; i<marks.length; i++){
     letfinalMarks = marks[i] + 10;
     marksArray.push(finalMarks);
  }
  console.log(i);// refrence error  i is not defined
  console.log(finalMarks);// refrence error final marks is not defined
return marksArray;
}
increaseMarks([10, 20, 30]);

We get a Reference Error. It is because variable declared with let is block-scoped and not function scoped and that is why we can not access variables declared inside the for loop outside it.

The next difference is to do with hoisting.

1. var -Undefined when accessing a variable before it’s declared
2. let -ReferenceError when accessing a variable before it’s declared

The var keyword-

console.log(num); // undefined 
var num= 1;

The let keyword

console.log(num);// reference error
let num= 1;

let vs const

The const keyword does not allow the variable to be reassigned anywhere in your code. For example-

let name = ‘Shinchan’;
const age = 5;
name = 'Shiro';
age = 10; // TypeError: Assignment to constant variable.

If you try to re-assign to the variable declared with const, the JS engine will throw error -TypeError: Assignment to constant variable.

But it doesn’t mean that variables declared with const are immutable. It just means that you can not re-assign the value. For example-

const dog= {
  name: 'Shery'
}

dog.name = 'labra' // ✅

dog = {} //❌ TypeError: Assignment to constant variable.

Changing a property of an object is not re-assigning the value. So if an object is declared with const, still you can change the property.