I see a lot of beginners get confused while using var, let, and const. Even when I was learning about it, I was also confused.

Let's understand the usage of these three one by one with differences

Function Scope

var, let , and const all are function scope, let's see with examples

function myFunction(){  
var greet = 'good morning';
let greet2 = 'good afternoon';
const greet3 = 'good evening';
} 
myFunction();

console.log(greet);// throws an error, greet is not defined
console.log(greet2);// throws an error, greet is not defined
console.log(greet3);// throws an error, greet is not defined

• In the above example, we can see we have declared variable inside a function using let, var, and const.

• These variables cannot be accessed outside it, and it will throws an error.

function myFunction(){  
var greet = 'good morning';
let greet2 = 'good afternoon';
const greet3 = 'good evening';

console.log(greet);// good morning
console.log(greet2);// good afternoon'
console.log(greet3);// good evening
} 
myFunction();

• If you remove the console.log, and put it inside the function, it will not give us an error, instead it will give us the value of that variable, Why?

• Because let,var, and const are function scoped and where we are accessing it? We are accessing it inside the function.

Block Scope ({ })

let and const are block scope, means if we declare them inside a block they can't be accessed outside it.

{
  const constBlockScope = 'hey i am const you can"t access me outside of this block';
  let letBlockScope = 'hey i am let you can"t access me outside of this block';
  console.log(letBlockScope);// hey i am let you can"t access me outside of this block
  console.log(constBlockScope);// hey i am const you can"t access me outside of this block
}

• this code will not throw any error as const and let both are block scope

now let's see how var behaves here

 {
  var helo = 'helo';
}
 console.log(helo); // helo

• It is not block scoped, so when we declare it inside a block it behaves like global scope.
• It is not the case that you can't access it inside the block, if you console.log and check the values you will still get it, but same thing doesn't happen in the case of let and const as they are block scoped.

Global Scope

• Variable declared with var, let, and const can be accessed anywhere in the program, but variable declared with var will be added to window global object while let and const are not.
• Now you may think what is window object, you can think of it as an object which represent your browser's window. So whenever you declare a variable with var it will by default became the member of that window object, while variable declared with let and const are not.
• Let's understand with example

var greet = 'helo';
let greet2 = 'good morning';
const greet3 = 'good evening';

console.log(window.variable1); // helo
console.log(window.variable2); // undefined 
console.log(window.variable3); // undefined

Hoisting of let, var, and const

You might be thinking what the hell is hoisting, is it something related to flag hoisting, let's understand it with the help of an example.

console.log(greet) // undefined

console.log(myFunction());// hoisting example

var greet = 'good morning';
let greetEvening = 'good evening'
function myFunction(){  
  return 'hoisting example';
  }

• In the above example, if you run this code you will not get any error, in other programming languages, using a variable even before declaring it, will definitely result in an error, but this is not the case with JavaScript.

• You can access a function or variable first and declare them later, this is known as hoisting. Although the variable declared above giving us undefined.

• From the above example , we understand variable declared with var keyword is hoisted.

//this is how js interpret the above code
var greet;
console.log(greet); // undefined
greet = 'good morning';

• let and const are also hoisted, and they both will throw an error.

console.log(greet1);
let greet1 = 'helo'; // this will throw an error

console.log(greet2);
const greet2 = 'helo'; // this will throw an error

Reassign

• var can be reassigned

  var greet1 = 'helo';
  greet1 = 'message changed';
  console.log(greet1)// message changed
  

• let can also be reassigned

let greet1 = 'helo';
greet1 = 'message changed';
console.log(greet1)// message changed

• const can't be reassigned

const greet1 = 'helo';
greet1 = 'message changed';
console.log(greet1)// throws an error

• We can initialize a variable later, when we use var, and let keyword.

 var greet1;
 greet1 = 'message changed';
 console.log(greet1) // message changed

 let greet1;
 greet1 = 'message changed';
 console.log(greet1); // message changed

• We cannot initialize a variable later, when we use const keyword.

 const greet2;
 greet1 = 'message changed';
 console.log(greet1) // throws an error