When any developer is working in JavaScript, He/She often uses let, var keywords. Most of us use it randomly as there has been a lot of confusion regarding the use of let and var in JavaScript. So, I am trying to clear most of the confusion by presenting one example.
So let’s check the difference between `let` and `var `with one example:
let keyword |
var keyword |
Definition: `let` allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. |
Definition: `var` is rather a keyword which defines a variable functional scope regardless of block scope |
xyz = { foo : function () { let x=15; if (x==15) { let x = 120; console.log(‘X=>’,x); } console.log(‘X=>’,x); } } xyz.foo(); |
xyz = { foo : function () { var x=15; If (x==15) { var x = 120; console.log(‘X=>’x); } console.log(‘X=>’,x); } } xyz.foo(); |
Output : - X=>120 X=>15 |
Output : - X=>120 X=>120
|
So `let` definition says it all, The scope of `let` variables are limited in scope to the block, statement, or expression on which it is used.
Hence here in `let` example the first `x` variable is declared under scope of foo function but the next `x` variable is written in if statement block which means the second variable is totally different from first `x` variable and that’s why value of second `x` is available only within the if statement block scope. And hence console shows 120 value of x within the if statement block.
When compiler comes out from the if statement block, the next console statement shows the value of x as 15 because here x is available which is declared above if and hence its persisted with the previous value which has been assigned.
In `var` keyword case, the var scope is global which has impacted output in the example :
x is 15 before if statement but in if block the same variable is redeclared once again to value 120 and hence console from if block prints 120, Later when compiler comes out of block statement it carries same value which is assigned in if block statement.
var is having global scope and hence it doesn’t care the scope of the variable inside the if statement block which means the x variable is same as the variable which is declared before if statement and after if statement.
`let` variables should be used when the variable has to have limited scope and will be used within the limited scope, Should be used in for loops, while loops or inside blocks of if conditions.
For example ,
for(let i=1;i<=10;i++)
{
console.log(i) // Here it will print 1,2,3...10
}
console.log(i);
//This line has to throw error as i is undefined as the scope of i is within the for loop block.
Let’s say in above example we use var keyword,
I.e
for(var i=1;1<=10;i++)
{
console.log(i) //Here it will print 1.. 10 same as let variable
}
console.log(i) // This line will print 10
Because the var scope is global and hence the value is printed which is changed in for the loop.
Note: It is logged as 10 because the for loop terminates after checking the incremented value of i.
Assume we are using strict mode
'use strict';
var varTemp = "this is a temp variable";
var varTemp = "this is a second temp variable"; //replaced easily
We cannot do the same thing with let
'use strict';
let letTemp = "this is a temp variable";
let letTemp = "this is a second temp variable" //SyntaxError: letTemp is already declared
When you subscribe to the blog, we will send you an e-mail when there are new updates on the site so you wouldn't miss them.