I had a lot of confusions between var and let, I was wondering how this both works, when and where it should be used, Initially I had a vision that both are same, Later I got to know the real difference between it.
var statement declares a variable, optionally initializing it to a value.
let statement declares a block scope local variable, optionally initializing it to a value. let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. This is unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope.
Why they named it as let, here's the link.
Okay, I believe coding will be fun and will raise up with more doubts, let's play with javascript now,
Global declaration,
If both let and var are declared globally means, it's not possible to access let from window object, let's see a sample,
var varName="this is var";
let letName="this is let";
console.log(letName); //"this is let"
console.log(window.varName); //"this is var"
console.log(window.letName); //"undefined"
In the above case, We can see the window.varName prints "this is var", We all know globally declared var can be accessed from window, But in window.letName it prints "undefined", This is why because let will be present in global declaration scope not in window scope.
In Loops
As I said before, let can be used for limited scope level. Like, in for loops, while loops or inside the scope of if conditions etc. Basically, where ever the scope of the variable has to be limited.
for(var i=0; i<10; i++){
console.log(i); //i logs 0 to 9
}
console.log(i); //i logs 9
Above snippet, I have mentioned var i in a for loop scope once after the iteration, we can still see i has 9, This is because var can be accessed outside the scope, i is logged as 9 because the for loop terminates after checking the incremented value of i. Now let's see with let,
for(let i=0; i<10; i++){
console.log(i); //i logs 0 to 9
}
console.log(i); //throws error i is not defined
Yeah, here I have mentioned let i in for loop, So after iteration surely i won't be available in global or parent scope, Because, we clearly know let can be accessed within a limited scope.
No Re-Declaration,
let cannot be re-declared within a scope unlike var, this is one of the key features that let has, But it has an option to re-assign.
Assume we are using strict mode
'use strict';
var name= "Batman";
var name= "Bruce"; //this is easily possible
'use strict';
let name= "IronMan";
let name= "Tony Stark"; //SyntaxError: name is already declared
I hope the above code might give a clear solution on re-declaration, Let's see another sample snippet,
var isDc =true;
var isMarvel = true;
if (isDc) {
let msg = "Dc is great";
console.log(msg); //prints DC is great;
}
if (isMarvel) {
let msg="Marvel is great";
console.log(msg); //prints Marvel is great;
}
console.log(msg); // Refer error. msg is not defined
Yeah, you got it clearly, Re-declaration within the scope is not possible on let, But outside of it has a way to go.
I hope the above words might have helped you in some way in understanding var and let, Please drop me a comment for any questions and correct me if I am wrong.
To know let in depth, click here.
Also for useful JS hacks, have a look at this.