Block level scope in Javascript using LET

Before we start learning difference between let and var, I’d like  to explain what types of scoping we have in Javascript.

In Javascript we have 3 types of scopes

  1. Global Scope
    • When we are declaring variables outside of functions then we can say that scope for this variable is Global scope because accessibility of this variable is global.
  2. Local Scope
    • Local scope is also known as Functional scope.
    • When we declare variables inside functions then scope for these variables are limited to that function. It’s accessibility is limited to the function’s definition. This scope is known as local scope.
  3. Lexical Scope
    • Lexical scope is also known as Static Scope.
    • It means when we have nested functions then variables and resources of parent functions are accessible to child functions as well. It means child functions are lexically bound to execution of their parents.

So when we are talking about scope we are missing block wise scope in Javascript, Which we are getting in all other languages. i.e. C# / Java etc.

 

using LET we can define variables with block level scoping. Let keyword is introduced in ES6 Standards of Javascript.

Let’s understand LET using Example. Consider below code snippets to explore LET.

function Print_using_var(){
 var name = "Mitesh";
 if(name == "Mitesh"){
 var name = "Mitesh Gadhiya";
 console.log("[Inside If block] - My name is " + name);
 }
 console.log("[Outside If block] - My name is " + name);
}

Output for above code snippet is as below:

[Inside If block] - My name is Mitesh Gadhiya
[Outside If block] - My name is Mitesh Gadhiya

Here when we are declaring variable using var keyword then value of name is overwrite and accessible to outside if block too. This happens as scope of this variable is functional scope so when we are updating value inside if block it will be updated to all references.

To avoid this type of situations we can declare variables using LET keyword it will allow developer to declare block level scoping variables.

Let’s try this using below code snippet.

function Print_Using_LET() {
    var name = "Mitesh";
    if (name == "Mitesh") {
        let name = "Mitesh Gadhiya";
        console.log("[Inside If block] - My name is " + name);
    }
    console.log("[Outside If block] - My name is " + name);
}
Print_Using_LET(); 

Output of above code snippet is as below:

[Inside If block] - My name is Mitesh Gadhiya
[Outside If block] - My name is Mitesh

Variables which are declared with LET keyword are block-scoped: they only accessible inside the block they are defined in.

Here variable name is declared using VAR keyword so it will be used with function level scope. Inside if block name variable is declared using LET keyword so that variable has scope till the if block ended. Outside if block it will not be accessible.

Conclusion:

Block level scoping is very important in JavaScript which is available now in ES6 JavaScript standard using LET. This will be helpful at time of accidental modification of global or functional level scope variables.

Hope it will be helpful to you guys.

Cheers 🙂

Written by Mitesh Gadhiya