Difference between var, let and const keywords in JavaScript
The keywords var, let, and const in JavaScript define the variable scope and behavior. The var keyword has function scope and is hoisted. The let and const keywords have block scope, with const requiring an initial value and preventing reassignment.
JavaScript var keyword
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.
var a = 10
function f() {
var b = 20
console.log(a, b)
}
f();
console.log(a);
Output
10 20 10
Example 2: The below example explains the behavior of var variables when declared inside a function and accessed outside of it.
function f() {
// It can be accessible any
// where within this function
var a = 10;
console.log(a)
}
f();
// A cannot be accessible
// outside of function
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.
var a = 10
// User can re-declare
// variable using var
var a = 8
// User can update var variable
a = 7
console.log(a);
Output
7
Example 4: The below code explains the hoisting concept with the var keyword variables.
console.log(a);
var a = 10;
Output
undefined
JavaScript let keyword
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.
let a = 10;
function f() {
let b = 9
console.log(b);
console.log(a);
}
f();
Output
9 10
Example 2: The below code explains the block scope of the variables declared using the let keyword.
let a = 10;
function f() {
if (true) {
let b = 9
// It prints 9
console.log(b);
}
// It gives error as it
// defined in if block
console.log(b);
}
f()
// It prints 10
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.
let a = 10
// It is not allowed
let a = 10
// It is allowed
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.
let a = 10
if (true) {
let a = 9
console.log(a) // It prints 9
}
console.log(a) // It prints 10
Output
9 10
Example 5: This code explains the hoisting concept with the let variables.
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.
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.
const a = {
prop1: 10,
prop2: 9
}
// It is allowed
a.prop1 = 3
// It is not allowed
a = {
b: 10,
prop2: 9
}
Output:
Uncaught SyntaxError: Unexpected identifier
Differences between var, let, and const
| var | let | 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.