Block,Scope & Shadowing In javascript...

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

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

You My Friend Have A Great Day!!

Blog

Block,Scope & Shadowing In javascript...

Jasmeet Singh Bali

Block?

Block Scope?

Shadowing in javascript

Case : Let keyword

I'llegal Shadowing

Join Our Newsletter. No Spam, Only the good stuff.

Related