One of the confusing topics in JavaScript is the way variables are declared. Before ES6 (ECMAScript 6), var was used only. Now, the variables can also be declared using let. Let’s see the differences between them so you can know when to use them.
Let us go through the difference one by one with examples.
Scope
Var uses function scope i.e. its scope is limited to the function in which it is defined. However, let uses block scope i.e. its scope is only limited to the block in which it is defined. Outside that block, it is inaccessible. Let’s understand this through an example.
function test() {
var score = 100;
for (let i = 0; i < 2; i++) {
console.log("i: " + i);
console.log("score: " + score);
}
console.log("score: " + score);
console.log("i: " + i);
console.log("score: " + score);
}
test();
Output
i: 0
score: 100
i: 1
score: 100
score: 100
Uncaught ReferenceError: i is not defined
Here, the variable “score” has function scope (it is accessible anywhere in the function in which it is defined) and the variable “i” has block scope (accessible only in the for loop). That’s why, when you try to access “i” outside its block, it gives a reference error. If we change the keyword of “i” from let to var, then we will be able to use it. Let’s see.
function test() {
var score = 100;
for (var i = 0; i < 2; i++) {
console.log("i: " + i);
console.log("score: " + score);
}
console.log("score: " + score);
console.log("i: " + i);
console.log("score: " + score);
}
Output
i: 0
score: 100
i: 1
score: 100
score: 100
i: 2
score: 100
Global variable
The other difference is concerned with the global variable. When the variables are declared outside the function, the var keyword creates a global variable and it attaches that variable to the window object in the browser. However, the global variable created by the let variable is not attached to the window object. Let’s see an example.
var score1 = 45;
let score2 = 56;
console.log(window.score1);
console.log(window.score2);
Output
45
undefined
“score1” is created by the var variable and therefore window.score1 is equal to 45. However, window.score2 is equal to undefined.
Temporal dead zone
When we declare variables using the var keyword, they are hoisted and assigned an undefined value. Let’s see an example to understand this.
console.log(score);
var score = 100;
console.log(score);
Output
undefined
100
We are trying to access a variable before it is declared, and therefore, we would expect that it would throw an error. However, we see an undefined value. This is because it has been assigned an undefined value. You can assume that variables are declared at the top of their scope for understanding, however, this is not the actual case. i.e.
var score
console.log(score)
score = 100
console.log(score)
If we try to access a variable before it is declared with let, it throws a reference error because the variable is not initialized with any value unlike the variable declared with var. It is said to be in a Temporal Dead Zone (A period between the creation of variable and its initialization). Let’s see.
console.log(score)
let score = 100
console.log(score)
Output
Uncaught ReferenceError: score is not defined
The variables declared using let are cannot be accessed until they are initialized.
Redeclaration
Variables created using var can be redeclared. However, the variables created using let cannot be redeclared. Consider the following example.
var score1 = 56
var score1 = 39 // allowed
let score2 = 56
let score2 = 89 // gives an error
Uncaught SyntaxError: Identifier 'score2' has already been declared
