Why should you use let instead of var?

You may find keyword called let from ES2015. It will used to define block scoped variables. Block scope is newly introduced in ES2015. Prior to ES2015 you have only Global scope & Function scope.

Global Scope:

Variables you declare out side of any function are called as Global Scope variables or Global variables. So that these variables can be accessed from any where in the program. Please find example below:

var userName = "Thirupathi Jarajapu";

function myFun(){
    //userName variable used here which is declared outside of this function 
    console.log("User Name inside myFun: "+userName); //Displays Thirupathi Jarajapu
}

//userName variable used here which is declared at the top 
console.log("User Name outside: "+userName); //Displays Thirupathi Jarajapu

Function Scope:

Variables you declare inside of any function are called as Function Scope variables or Local variables. So that these variables can be accessed only from within the function. Please find example below:

function myFun(){
     var userName = "Thirupathi Jarajapu";
     //userName variable used and declared inside myFun
     console.log("User Name inside myFun: "+userName); //Displays Thirupathi Jarajapu
}
console.log("User Name accessed outside from myFun: "+userName); //Displays undefined.

Block Scope:

Variables you declare with var keyword can be accessed from any where in the program as shown above. Usually blocks will be represented by {} in the program. Now you can’t restrict accessing variables using var keyword. So you have new keyword let to achieve block scope from ES2015. Plase find example below:

let userName = "Thirupathi J";

function myFun(){
    let userName = "Ruthvik J";
    console.log("User Name: "+userName); //Ruthvik J
}
console.log("User Name: "+userName); //Thirupathi J

var userName = "Thirupathi J";

function myFun(){
    var userName = "Ruthvik J";
    console.log("User Name: "+userName); //Thirupathi J
}
console.log("User Name: "+userName); //Thirupathi J

As you find difference with var & let keywords declaration. “userName” variable is restricted and it has a seperate block level scopes.

Let & Var in Loop Scope:

Just wanted to show you how practially let and var keywords works with block level scopes using for-loop.

var k = 4;
for(var k=0; k<6; k++){
 console.log("Iteration : "+k);
}
console.log("value of k outside of for-loop: "+k); // shows as 6 because k can be access and modified any where in the program.

let k = 4;
for(let k=0; k<6; k++){
 console.log("Iteration : "+k);
}
console.log("value of k outside of for-loop: "+k); // shows as 4 as k has outside and inside different scopes.

Hoisting Variables:

Variables Hoisting is nice concept in javascript. It happens in javascript by default. You may use some variables prior to declare them. Eventhough your program works without giving any error in javascript. It’s because of variables hoisting. All variables declarations will be moved to the top of program. Only declaration will be moved but not assignments. Please find example below:

Javascript before variable hoisting:

console.log("User Name: "+userName); //output as undefined
var userName = "Thirupathi J";
console.log("User Name: "+userName); //output as Thirupathi J

Javascript after variable hoisting:

var userName;
console.log("User Name: "+userName); //output as undefined
userName = "Thirupathi J";
console.log("User Name: "+userName); //output as Thirupathi J

Variables which are declared using let keyword will not be hoisted to the top of the scope. So you can’t use it with it’s decaration. It gives ReferenceError.

Conclusion:

So using Let is always safer and better than using Var keyword to declaring variables. As you may have many variables declared in your project, And same variable names can be used in different blocks of code. In this case you should make sure that blocks of variables should not conflict each other. Now you should be in a poisition to decide.

Thanks for reading this. Hope it helps !