• Block is defined by curly braces {}. The block is used to combine multiple JS statements into one group.

• The group of multiple statements is used where the JS engine expects one statement like an if statement because "if" expects single statements syntactically but we're using a group of statements to do that we use block {}.
• Block is compulsory to have multiple statements.

  {
    //group of code
  }

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

  10

• The variables and functions that we can access inside the block it's known as block scope.

  {
    var a = 10; // Global Scope

    //let and const are block scope
    let b = 20;
    const c = 30;
  }

• let and const are hoisted in separate memory space and reserved as an undefined.
• let and const are block scope means can't be accessed out of stock.

  {
    var a = 10;
    let b = 20;
    const c = 30;
   
    console.log(a);//10
    console.log(b);//20
    console.log(c);//30
  }

  console.log(a);//10
  console.log(b);
  console.log(c);

  Uncaught ReferenceError: b is not defined at :12:15

• The moment we're executing the line console.log(b); the block scope is removed in the browser.

• If we have a same named variable outside of the block {}, that variable is going to be shadowed by the variable inside the block because both are pointing to same memory location.

  var a = 100;
  {
    var a = 10; //this variable shadows the above 'a' = 100 variable
    var b = 20;
    const c = 30;

    console.log(a);//10 - because of shadowing, 10 is printed
    console.log(b);
    console.log(c);
  }
  console.log(a);//10 - because of shadowing, 10 is printed, because pointing to same memory location.

  let b = 100; //let and const are hoisted and stored in different scope.

  {
    var a = 10; //global scope because it's a var datatype
    let b = 20; //shadowing the value of above 'b' variable
    const c = 30;
    console.log(a);//10
    console.log(b);//20 - 'b' variable got shadowed, here 'b' refers to block scope
    console.log(c);//30
  }
  console.log(b);//100 - refers to outside scope since 'b' is a let datatype

  10
  20
  30
  100

  const c  = 100;
  {
    var a = 10;
    let b = 20;
    const c = 30; //shadowing the value of the above 'c' variable with 30
    console.log(a);//10
    console.log(b);//20
    console.log(c);//30  - 'c' variable got shadowed, here 'c' refers to block scope
  }
  console.log(c);//100 - because its outside of the scope i.e. script block[check in browser]

  10
  20
  30
  100

  var c = 100;
  function x(){
    const c = 10; //shadowing the value of the above 'c' variable with 10
    console.log(c);//10 - 'c' variable got shadowed, here 'c' refers to block scope
  }
  x();
  console.log(c);//100 - because its outside of the scope i.e. script block[check in browser]

  10
  100

• We can't shadow a let with a var in a block scope. It throws an error because it's crossing the boundary of its scope.

  let a = 20;
  {
    //we can do it with **let** type
    var a = 20; //SyntaxError
  }

  Uncaught SyntaxError: Identifier 'a' has already been declared

    var a = 20;
    {
      let a = 40;//shadowed
      console.log(a);
    }

  40

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

• This program doesn't throw any error at all because var has its own function boundaries.
• It's not interfering with

  let a = 20

• This is totally valid. So, we can't call it illegal shadowing.

  const a  = 20;
  {
    const a  = 30; //shadowing a variable
    console.log(a);//30
  }

• works fine because it's in the same memory.

  30

  //outer
  const a = 20;
  {
    //inner-1
    const a = 100;
    {
      //inner-2
      const a = 200; //shadowing 'a' variable with 200. since const is a block scope.
      console.log(a);//200 - because 'a' got shadowed
    }
    console.log(a);//100 - shadowing 'a' variable with 100. since const is a block scope.
  }
  console.log(a);//20 - global scope

    200
    100
    20
  

1. console.log(a); in inner-2 block, if 'a' variable isn't available. Then, it checks 'a' in the lexical environment of its parent i.e. a=100
2. If 'a' is not available the inner-1 block. Then, it checks 'a' in the lexical environment of its parent i.e. outer block. i.e. Global Execution Context a=20.