DEV Community 👩‍💻👨‍💻

Cover image for Var VS Let VS Const in JavaScript
Muhammad Zubair
Muhammad Zubair

Posted on

Var VS Let VS Const in JavaScript

Hey 👋, Guys Welcome.

Today we are deeply learning , that what's the difference between LET , VAR & CONST Keyword in JavaScript.

Let's Dive In ..


In JavaScript there are mainly 3 methods to declare the variables.

  1. Using var
  2. Using let
  3. Using const

1) Using var

Before the release of (1995-2015) ECMA Script 6 (ES6) in 2015 , This was the keyword most used to declare variables , arrays or objects etc.

Example

var X=12;
console.log(X) // 12

var Y="John Doe";
console.log(Y) // John Doe

var Z=[1,2,3,4,5];
console.log(Z) // [1,2,3,4,5]
Enter fullscreen mode Exit fullscreen mode

2) Using let

After the release of ECMA Script 6 (ES6) in 2015 , This was the keyword most used to declare variables , arrays or objects etc.

let X=12;
console.log(X) //12

let Y="John Doe";
console.log(Y) //John Doe

let Z=[1,2,3,4,5];
console.log(Z) //[1,2,3,4,5]
Enter fullscreen mode Exit fullscreen mode

2) Using const

After the release of ECMA Script 6 (ES6) in 2015 , This was the keyword most used to declare variables , arrays or objects etc.

const X=12;
console.log(X) //12

const Y="John Doe";
console.log(Y) //John Doe

const Z=[1,2,3,4,5];
console.log(Z) //[1,2,3,4,5]
Enter fullscreen mode Exit fullscreen mode

As you can see that we use all these three methods to declare and initialize the variables , now we will discuss few things that differentiate them

Re-Declaration of Variable

With the help of var keyword, we can re-declare the variable with same identifier , see below example

var X=21;
var X=12;

console.log(X) // 12
Enter fullscreen mode Exit fullscreen mode

Now , If we try to re-declare the variable with same identifier with let or const keyword , this will generate the error

let X=21;
let X=12;

console.log(X) // Identifier 'X' has already been declared
Enter fullscreen mode Exit fullscreen mode

Scope (Global and Block)

In JavaScript everything written inside the curly braces {} is considered as block. var has function scope if a variable is declared using var keyword it will be accessible throughout the function.

In Given below example you can see that if we declare the variable with let keyword and try to access it outside the block , this can not be accessed and give error

{
    let X=12
}
console.log(X) // X is not defined
Enter fullscreen mode Exit fullscreen mode

But if we do the same thing with var keyword , then there will be no error and variable can be easily accessed outside block scope , see example

{
    var X=12
}
console.log(X) // 12
Enter fullscreen mode Exit fullscreen mode

Immutability

Now Let's discuss something about const keyword. with const , once its initialized , its value (reference) can never be changed , that's why they are immutable

const Z="Good Morning"
console.log (Z)  // Good Morning
Z="Good Evening" // Error :Assignment to constant variable.
Enter fullscreen mode Exit fullscreen mode
const Arr=[1,2,3,4,5]
Arr[1]=1.5
console.log(Arr) // [1,1.5,3,4,5]
Enter fullscreen mode Exit fullscreen mode

const allows us to only modify the value of the variable (array or objects etc), but the reference to the array cannot be changed, for example

const Arr=[1,2,3,4,5]
console.log(Arr) // [1,2,3,4,5]
Arr=[1,5,6,7,8]  // Error: Assignment to constant variable.
Enter fullscreen mode Exit fullscreen mode

These Were the Major Differences in these three keywords. Now its totally depends upon you , that which one you preferr to use. The let & const are widely used nowadays

Hope you liked my article 💛. I will meet you in the next post with something new to learn.

Happy Coding !! ⚡

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

async await