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:
- Variable Hoisting
- Scope
- Top-level Binding
- 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
undefined10
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