Difference between var, let and const in JavaScript

In this article, we will learn about the main differences between var, let and const in JavaScript.

var:

A var statement has two scopes, global scope and function scope. var declarations are generally hoisted.

Global scope of var:

If we define a var outside any function, it is said to have a global scope and it can be accessed globally.

var x = 10;
function hey(){
console.log("Hey, welcome to my blog")
console.log(x);  //10
}
console.log(x);  //10
hey();           //Hey, welcome to my blog

Function scope of var:

If we define a var inside a function, it is only accessible inside that function and not globally.

function greet(){
var greeting = "Hey, welcome to my blog";
console.log(greeting);
}
greet();       //Hey, welcome to my blog

console.log(greeting);   //ReferenceError: greeting is not defined

Here, the variable greeting is inside a function called "greet" and it is only accessible inside that function. When we try to console.log the same var (greeting), it gives us a ReferenceError, telling greeting is not defined. Hence, var declarations inside a function are restricted to that function itself.

var can be redeclared and updated.
var variables are hoisted with a default value "undefined" before their initialization.
Declaring multiple var variables with the same name can cause errors since it has a global scope.

let:

let keyword also helps us to declare variables. It's preferred over var. Also it offers block scope.

Block scope of let:

A block is a bunch of code enclosed in {}. Anything inside the curly braces is a block. So when you declare a variable with the keyword let, it is only accessible inside that block.

function letScope() {
  let y = 1;
  if (true) {
    let y = 2;
    console.log(y); // Output: 2
  }
  console.log(y); // Output: 1
}
letScope();

The value of let can be updated but you cannot re-declare in the same block.
let declarations are also hoisted. But if you try to access it before declaration, you will see a "ReferenceError".

let greeting = "Welcome";
console.log(greeting);       //Welcome
greeting = "How are you?";
console.log(greeting);       //How are you?

let greeting = "Welcome";
console.log(greeting);       
let greeting = "How are you?";
console.log(greeting);

Here, you will get a syntax error "SyntaxError: Identifier 'greeting' has already been declared".

const:

Variables that are declared with the keyword const always maintain fixed values. Their value cannot be changed.

Block scope of const:

Just like let, const declarations are accessible only inside the block they are declared in.

function blockScope() {
  const y = 1;
  if (true) {
    const y = 2;
    console.log(y); // Output: 2
  }
  console.log(y); // Output: 1
}

blockScope();

const declarations cannot be updated or redeclared. The value remains constant in that scope.
const declarations must be initialized while declaring.
const declarations are also hoisted but are not initialized. They stay in Temporal Dead Zone.

const greeting = "Welcome";
console.log(greeting);       
greeting = "How are you?";
console.log(greeting);       //TypeError: Assignment to constant variable.

const greeting = "Welcome";
console.log(greeting);       
const greeting = "How are you?";
console.log(greeting);            //SyntaxError: Identifier 'greeting' has already been declared

I hope this article helped you understand the diffrence between var, let and const. Thank You.