Block,Scope & Shadowing In javascript...
Tags: javascript, core, blockscope, shadowing
Published: 2021-08-31 08:03:02

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