DEV Community

Cover image for Block,Scope & Shadowing In javascript...
Jasmeet Singh Bali
Jasmeet Singh Bali

Posted on

Block,Scope & Shadowing In javascript...

Block?

                  # an empty block
                  {
                    //Compound statements
                  }
Enter fullscreen mode Exit fullscreen mode

IMPORTANT Block combines multiple statements as a single unit so as javascript can execute multiple lines of code as multiple lines inside block act as single unit

                  # no use of block single line possible only
                  if(true) true;

                  # with use of block
                  # multiple lines can be written as a single unit where javascript expects only single statement
                  if(true){
                    const a =100; // line1
                    console.log(100); //line 2
                  }
Enter fullscreen mode Exit fullscreen mode

Block Scope?

                {
                  // variables or
                  //functions that can be accessed inside this block
                  // is called BLOCK SCOPE
                }
Enter fullscreen mode Exit fullscreen mode
  • When we run the code snippet-12, A Block scope is created where b and c are present while a is inside global scope even if it is declared inside a block

                # code snippet -12
                {
                  var a = 10;
                  let b = 100;
                  const c = 1000;
                }
                console.log(a); // 10
                console.log(b); //  referrence error
                console.log(c); //  referrence error
                # Inside debugger
    
                # Block
                b: undefined
                c: undefined
    
                # Global
                a: undefined
    

that is the reason let and const are in block scope i.e seperate scope, and we can only access a in global scope while b and c in the block scope.

Shadowing in javascript

The variable declared inside the block takes preference i.e shadows the same named variable declared outside the block

              var a= 100;
              {
                var a=10;
                console.log(a);

              }

              # output
              10
Enter fullscreen mode Exit fullscreen mode

In addition to shadowing the var keyword variable will modify the same name variable value declared in the global scope
var a = 100;
{
var a=10
console.log(a);
}
console.log(a)

              # output
              10
              10
Enter fullscreen mode Exit fullscreen mode

Case : Let keyword

Shadowing happens in let also

However In contrast to var the let keyword declared variable do not alter the value of the same let keyword variable in the global scope

              let b = 100;
              {
                let b = 20;
                console.log(b);
              }
              console.log(b);

              # output
              20
              100

              # debugger

              # Script
              b: 100

              # Block
              b: 20

              # Global
Enter fullscreen mode Exit fullscreen mode

IMPORTANT - Shadowing works the similar way for the function scope also

              const c=100;
              function x(){
                const c = 30;
                console.log(c);
              }
              x();
              console.log(c);

              # output
              30
              100
Enter fullscreen mode Exit fullscreen mode

I'llegal Shadowing

              # illegal shadowing
              let a= 20;
              {
                var a =10;
              }

              # output
              SyntaxError a has already been declared

              # legal shadowing
              # case-1
              let b =20;
              {
                let b=2;
              }
              # output
              No error runs perfectly

              # case-2
              var c =20;
              {
                let c=2;
              }
              # output
              No error runs perfectly
Enter fullscreen mode Exit fullscreen mode

IMPORTANT From the above code snippet the point to note is that shadowing can only happen if a particular variable do not cross the boundry for the case of illegal shadowing declaring a var a inside a block will give error as the var keyword will be in the global scope and not in the block scope

              let a= 20;
              function x(){
                var a =10;
              }

              # output
              No error perfectly runs
Enter fullscreen mode Exit fullscreen mode

IMPORTANT the arrow function behaves the same as normal function when Block Scope rules & shadowing are considered.

You My Friend Have A Great Day!!

Discussion (1)

Collapse
1122abhi profile image
Abhijeet Konnur

Thank you