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.