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.
- JavaScript Arrow function
- How to use Map, Filter, and Reduce in JavaScript
- Set a default parameter value for a JavaScript function
- Replace multiple strings using Split and Join functions
Difference between let and var
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
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..!!