Difference between var, let and const keywords in JavaScript
In JavaScript, users can declare a variable using three keywords that are var, let, and const. The behavior and the scope of a variable are also based on the keyword used to define it.
The var is the oldest keyword to declare a variable in JavaScript. It has the Global scoped or function scoped which means variables defined outside the function can be accessed globally, and variables defined inside a particular function can be accessed within the function.
Example 1: The below code example explains the use of the var keyword to declare the variables in JavaScript.
Javascript
var a = 10
function f() {
var b = 20
console.log(a, b)
}
f();
console.log(a);
|
Example 2: The below example explains the behaviour of var variables when declared inside a function and accessed outside of it.
Javascript
function f() {
var a = 10;
console.log(a)
}
f();
console.log(a);
|
Output:
10
ReferenceError: a is not defined
Example 3: The below code re-declare a variable with same name in the same scope using the var keyword, which gives no error in the case of var keyword.
Javascript
var a = 10
var a = 8
a = 7
console.log(a);
|
Example 4: The below code explains the hoisting concept with the var keyword variables.
Javascript
console.log(a);
var a = 10;
|
The let keyword is an improved version of the var keyword. It is introduced in the ES6 or EcmaScript 2015. These variables has the block scope. It can’t be accessible outside the particular code block ({block}).
Example 1: The below code declares the variable using the let keyword.
Javascript
let a = 10;
function f() {
let b = 9
console.log(b);
console.log(a);
}
f();
|
Example 2: The below code explains the block scope of the variables declared using the let keyword.
Javascript
let a = 10;
function f() {
if ( true ) {
let b = 9
console.log(b);
}
console.log(b);
}
f()
console.log(a)
|
Output:
9
ReferenceError: b is not defined
Example 3: The below code explains the behaviour of let variables when they are re-declared in the same scope.
Javascript
let a = 10
let a = 10
a = 10
|
Output:
Uncaught SyntaxError: Identifier 'a' has already been declared
Example 4: The below code explains the behaviour of let variables when they are re-declared in the different scopes.
Javascript
let a = 10
if ( true ) {
let a = 9
console.log(a)
}
console.log(a)
|
Example 5: This code explains the hoisting concept with the let variables.
Javascript
console.log(a);
let a = 10;
|
Output:
Uncaught ReferenceError: Cannot access 'a' before initialization
JavaScript const
The const keyword has all the properties that are the same as the let keyword, except the user cannot update it and have to assign it with a value at the time of declaration. These variables also have the block scope. It is mainly used to create constant variables whose values can not be changed once they are initialized with a value.
Example 1: This code tries to change the value of the const variable.
Javascript
const a = 10;
function f() {
a = 9
console.log(a)
}
f();
|
Output:
TypeError:Assignment to constant variable.
Example 2: This code explains the use of the const keyword to declare the JavaScript objects.
Javascript
const a = {
prop1: 10,
prop2: 9
}
a.prop1 = 3
a = {
b: 10,
prop2: 9
}
|
Output:
Uncaught SyntaxError: Unexpected identifier
Differences between var, let, and const
The scope of a var variable is functional or global scope. |
The scope of a let variable is block scope. |
The scope of a const variable is block scope. |
It can be updated and re-declared in the same scope. |
It can be updated but cannot be re-declared in the same scope. |
It can neither be updated or re-declared in any scope. |
It can be declared without initialization. |
It can be declared without initialization. |
It cannot be declared without initialization. |
It can be accessed without initialization as its default value is “undefined”. |
It cannot be accessed without initialization otherwise it will give ‘referenceError’. |
It cannot be accessed without initialization, as it cannot be declared without initialization. |
These variables are hoisted. |
These variables are hoisted but stay in the temporal dead zone untill the initialization. |
These variables are hoisted but stays in the temporal dead zone until the initialization. |
Note: Sometimes, users face problems while working with the var variable as they change its value of it in a particular block. So, users should use the let and const keywords to declare a variable in JavaScript.
Last Updated :
18 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...