Difference between ‘let’ and ‘var’ in JavaScript

Hello JavaScript Developers, So this is a very short and exact article stating what are the actual differences between let and var which a JavaScript developer must be aware of.

Here, I will be discussing the following topics stating the differences between let and var:

1. Variable Hoisting
2. Scope
3. Top-level Binding
4. Redeclaration Rules

Variable hoisting is done for variables declared with var and not with let

Ques: What does hoisting mean?

Ans: Hoisting is a mechanism in javascript where all the variables declared with var and declared functions are moved to the top of their scope before the actual execution of the code starts. In case you wondered why you were able to call functions before the declaration. This was the reason.

So, for var what happens is you can use the variable before the declaration and the engine will not throw an error while executing the code.

Example Code (var):

console.log(a);
var a=10;
console.log(a);

After Hoisting:

var a;
console.log(a);
a=10;
console.log(a);

Result

undefined
10

Example Code (let):

console.log(a);
let a=10;

After Hoisting:

Same code as above

Result

Line 1: ReferenceError: Cannot access 'a' before initialization

var is scoped to the immediate outer function.

var is scoped to the immediate outer function of where the var declaration is done, while let is block scoped.

Example Code (let):

for(let i=0;i<10;i++) {
console.log(i); //i is visible thus is logged in the console as 0,1,2,….,9
}
console.log(i); //throws an error as “i is not defined” because i is not visible

Example Code (var):

for(var i=0; i<10; i++) {
console.log(i); //i is visible thus is logged in the console as 0,1,2,….,9
}
console.log(i); //i is visible here too. thus is logged as 10.

var on top-level binds to the global object.

Var on the top-level binds to the global object (window object) while let doesn’t.

Example :

var x = ‘global’;
let y = ‘global’;
console.log(this.x); // “global”
console.log(this.y); // undefined

Redeclaration

In the case of var, redeclaration is possible while in the case of let redeclaration is not possible.

Example Code:

var foo = “foo1”;
var foo = “foo2”; // No problem, ‘foo’ is replaced.
let bar = “bar1”;
let bar = “bar2”; // SyntaxError: Identifier ‘bar’ has already been declared