Block,Scope & Shadowing In javascript...

#javascript #core #blockscope #shadowing

Block?

                  # an empty block                  {                    //Compound statements                  }

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                  }

Block Scope?

                {                  // variables or                  //functions that can be accessed inside this block                  // is called BLOCK SCOPE                }

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

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

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

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

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

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