Difference between var, let, and const keyword in JavaScript

In JavaScript, the keywords var, let, and const are a bit confusing. So, in this Answer, we will look at the differences between these keywords.

Note: To read more please see let and const.

What is Scope?

var let const
Variables declared with var are in the function scope. Variables declared with let are in the block scope. Variables declared with const are in the block scope.

Scope is the accessibility during runtime of variables, functions, or objects in a particular part of your code.

1. Global scope

When we define a variable outside of all document functions, it is in the Global scope and is accessible to all available functions.

var globalVal = 10;
function test() {
console.log("Printing gloablVal", globalVal);
}
test(); //10

test JavaScript, in the function in the code above, will check if globalVal is defined. It finds that it is not defined, and then checks in the global scope to find the globalVal. Finally, it prints 10.

The globalVal is stored in the window object, so we can access it using window.globalVal. The variable in the global scope can be accessed and modified in any scope.

2. Function scope

When we define a variable inside a function, we can only access the variable inside the function.

function test(){
var a = 10;
console.log("Value of 'a' inside funuction", a);
}
test();
try{
console.log("Triyng to access 'a' defined in function ")
console.log(a);
}catch(e){
console.log(e.message);
}

The visibility of variable a is limited to the test function.

3. Block Scope

When we define a variable inside a block, we can only access the variable inside that block. We can achieve this with let and const.

var has no Block scope.

function test() {
{
let a = 10;
const b = 5;
}
try{
console.log("We will get error when we try to access a b")
console.log(a, b);// error will be thrown here
} catch(e) {
console.log(e.message);
}
}
test();

Paste before this

Look at the below code snippets to understand this.

Explanation:

  • In the var tab, when we run the code, we see an error as a is not defined because var variables are only accessible in the function scope.
  • In the let tab, when we run the code, we see an error as i is not defined because let variables are only accessible within the block they are declared.
  • In the const tab, when we run the code, we will see that x was defined under the block was accessible, but when we try to access x outside that block, we get an error.

Hoisting

Hoisting means that we can define a variable before its declaration.

var let const
Allowed Not allowed Not allowed

Take a look at the code snippets below to further understand this.

Explanation

  • In the var tab, when you run the code, you will see there is no error and that we can declare var variables after defining them.

  • In the let tab, when you run the code, you will get an error as let variables do not support hoisting.

  • In the const tab, when you run the code, you will get an error as const variables do not support hoisting.

Reassign the value

To reassign a value is to reassign the value of a variable.

var let const
Allowed Allowed Not allowed

Take a look at the code snippets below to understand this.

Explanation

  • In the var and let tab, when you run the code, you will see that there is no error and we can define new values to the var and let variables.

  • In the const tab, when you run the code, you will get an error as a const variables value cannot be reassigned.

Redeclaration of the variable

The redeclaration of a variable means that you can declare the variable again.

var let const
Allowed Not allowed Not allowed

Take a look at the code snippets below to understand this.

Explanation

  • In the var tab, when you run the code, you will see that there is no error as we allowed to declare the same variable again.

  • In the let and the const tabs, when you run the code, you will get an error as the let and const variables do not allow you to redeclare them again.

Summary

  • var is used when we need to create a variable inside of a block and want to access the var on the whole function.

  • let is used when we need to create a variable that should be only accessed inside the block.

  • const is used when we need to create a variable that should only be accessed inside the block, and the value of the variable remains unchanged.