DEV Community

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

Posted on

1

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!!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (1)

Collapse
 
1122abhi profile image
Abhijeet Konnur •

Thank you

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more