Difference between var, let and const in JavaScript

Today we will let you know the difference between var, let and const in JavaScript with example. Everyone knows about the const and var but in this article we will show you the example which will help you to understand about the let, var and const.

A var is a global scope variable where let is a block scope variable. Let’s take an example of let and var for different types of cases. You can check it via JS Bin.

Difference between let and var

1. Outside of a function
2. Inside a function
3. Inside a block
4. Loop
5. Loop with closure
6. Redeclaration

1. Outside of a function

When you declare a variable using var and let outside of a function then var will create a property in the global object whereas let don’t create a property in global object.

var abc = 10;
let xyz = 20;

console.log(abc); // 10
console.log(xyz); // 20

console.log(this.abc); // 10
console.log(this.xyz); // undefined

2. Inside a function

Let’s declare the variables in function using var and let. When you try to access that variable outside of the function then it will throw an error.

function insideFunc() {
  var abc = 10;
  let xyz = 20;

  console.log(abc); // 10
  console.log(xyz); // 20
};

insideFunc();

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

3. Inside a block

If you declared the variable within the block then only let variable can’t be accessed outside that block.

{
  var abc = 10;
  let xyz = 20;
  
  console.log(abc); // 10
  console.log(xyz); // 20
}

console.log(abc); // 10
console.log(xyz); // ReferenceError: xyz is not defined

4. Loop

When you define the variables in loop and try to access it then let variable will throw an error.

for (var a = 0; a < 10; a++) {
  var b = a * 2;
}
console.log(a); // 3
console.log(b); // 4

for (let x = 0; x < 10; x++) {
  let y = x * 2;
}
console.log(x); // ReferenceError: x is not defined
console.log(y); // ReferenceError: y is not defined

5. Loop with closure

Let’s take an example with `setTimeout` and try to print log of the variables.

for (var a = 0; a < 5; a++) {
  setTimeout(() => console.log(a), 0);
}
// Output: 5 5 5 5 5


for (let x = 0; x < 5; x++) {
  setTimeout(() => console.log(x), 0);
}
// Output: 0 1 2 3 4

Based on the logs we can say that it will be safe to use let for loops with closure.

6. Redeclaration

While you work with the strict mode then re-declaring the variable with let will prompt the error.

'use strict';
var abc = 10;
var abc = 20; // Working fine. 'abc' is replaced

'use strict';
let xyz = 10;
let xyz = 20; // SyntaxError: Identifier 'xyz' has already been declared

Const

const is also used as a block scope variable. There are two things that are different in const variables.

1. Can’t be re-assign
2. Required Initializer

1. Can’t be re-assign

If you are declaring the variable using const then you can’t be re-assigned it.

const a = 10;
a = 20; // TypeError: Assignment to constant variable

Note: While you are working with object/array then you can assign a value to the property of the variable but you can not assign a value to the variable.

const abc = {};
abc.x = 10;
console.log(abc.x); // 10

const abc = {};
abc = {x: 10}; // TypeError: Assignment to constant variable

2. Required Initializer

You must specify a value while declaring a variable using const.

const abc; // SyntaxError: Missing initializer in const declaration

Happy Coding..!!