Difference between var,let,const keywords in Javascript

In this article we will discuss let, var and const keyword individually and then see the difference between let , var and const keywords .These are the keywords of javascript which are used to initialize the variables. For i nitializing and declaring variable in javascript we need to use any one of them before the name of variable. In this we will discussed about var, let and const in details and then see the difference between all of them. We will discussed all the related concept that need to be understand for these keywords.

var keyword in JavaScript

var keyword is used for declaring a variable. The scope of these type of variable is global scope but when we are declaring the variable with the var keyword inside a function, that time scope of these variables are local(function) scope. Global scoped means variables that are declared globally or outside the function and can be accessed from anywhere within the program. Functional scoped means a variable that is declared inside a function and can be only accessed within the function.

Note: A value of a var variable can be changed during the execution of a program. We can re-declare the variable using var.

Example 1:

var a=10; //global scope
console.log(a)
function A(){
var b = 20; //Function(local)scope
console.log(b);
} 
A();
var a =5; //changing the value of a already declaring variable
console.log(a);

Output :

10
20
 5

In this example, First, we print a value of variable ‘a’, then print a value of variable ‘b’ which is declared inside a function. In the end, we changed the value of ‘a’ which are globally declared earlier and when we print again the value of ‘a’ it will print an updated value.

Example 2:

var a=10;

function A(){
var b =20;
console.log(a);
console.log(b);
}
A();
/*As we know this is function scoped variable so this can not be accessible outside the function*/
console.log(b); //error

Output :

10
20
ReferenceError: b is not defined

In this example, variable ‘b’ is declared within the function which means it is functional scope. Here, we get the reference error because we try to access the ‘b’ value outside the function.

Note: The value of a function-scoped variable can be changed within the function only but the value of a global variable can be changed within a whole program.

let keyword in javascript

Let is a new and updated version of a var keyword which generally do the same thing but it is block restricted. That means which block it will declare can only be accessible to that block. Hence, the scope of a let keyword is block-scoped. We can change the value of a variable with the let keyword but can not re-declare the same variable with the same value.

Example 1:

let c=10;
function A(){
let b=20;
console.log(b);
}
A();
console.log(c);

Output :

20
10

In this example, firstly it prints the value of the ‘b’ variable that is declared inside the function. Then it prints the value of a that is declared outside the function.

Example 2:

let a =10;
function  A(){
let b = 20;
console.log(a) //No error because function A is with in a ‘a’. //variable’s block
}
A();
console.log(b); //Error

Output :

10
ReferenceError: b is not defined

In this example, first the value of variable ‘a’ is declared because its block is still exist. Then it will gives a reference error because we try to print the value of variable ‘b’ outside of a function block.

Example 3:

let p=4; //variable declared
let p =4; // caught error
p=4;   //updating value (no error)

Output:

Syntax error :Identifier 'p' has already been declared

In this example, firstly we declared the ‘p’ variable. In the second line, we re-declared it which caught an error because re-declaring is not allowed in the let keyword. In the third line, we update our value with the same value(4) which is possible. So we don’t get the error in 3^rd line.

const keyword in Javascript

Const means constant which means when we initialize a variable with the const keyword it’s value remains constant all over the program. Hence we can not change or update the value of the variable of the const keyword and also not re-declare it. The scope of a const keyword is block scoped which means we can use the value of the const variable only in a block in which it is declared.
When we declare the const variable we must have to assign their value also (must initialize them also). After assigning the value of the const variable we can not change it anywhere within the program.

Example 1:

//const variable
const a=5;
console.log(a);
a=10;
console.log(a); //Error because we can not update the value of a.

Output :

5
TypeError:Assignment to constant variable.

In this example, we get the error in the second printing statement because here we try to change the value of the const variable.

Example 2:

const a=5;
console.log(a);
function A(){
const b=10;
console.log(b); 
}
A();
console.log(b); //Error

Output :

5
10
ReferenceError: b is not defined

In this example, we caught an error in the last statement ‘console.log(b)’ because the scope of a const variable blocks and here we try to print the value of ‘b’ from out of its block.

Difference between var, let, and const keywords:

Criteria	var	let	const
Scope	The scope of a var variable is global and functional.	The scope of let variable blocks.	The scope of a const variable blocks.
Updation	The value of a var variable can be updated within a scope.	The value of a let variable can also be updated with in scope.	The value of a const variable can not be updated in the program.
Re-declaration	We can re-declare the var variable.	We can not re-declare the let variable.	We can not re-declare the const variable.
Declaring and initialization	We can declare the var variable without initialization.	We can declare the let variable without initialization.	We must have to declare the const variable with their initialization.

Fuel Your Passion for Coding: Dive into Our Other Posts