Skip to content

Latest commit

 

History

History
100 lines (83 loc) · 3.21 KB

lecture-9.md

File metadata and controls

100 lines (83 loc) · 3.21 KB

Episode 9 : Block Scope & Shadowing in JS

What is a Block?

  • Block aka compound statement is used to group JS statements together into 1 group. We group them within {...}

    {
        var a = 10;
        let b = 20;
        const c = 30;
        // Here let and const are hoisted in Block scope,
        // While, var is hoisted in Global scope.
    }
  • Block Scope and its accessibility example

    {
        var a = 10;
        let b = 20;
        const c = 30;
    }
    console.log(a); // 10
    console.log(b); // Uncaught ReferenceError: b is not defined
    • Reason?
      • In the BLOCK SCOPE; we get b and c inside it initialized as undefined as a part of hoisting (in a seperate memory space called block)

      • While, a is stored inside a GLOBAL scope.

      • Thus we say, let and const are BLOCK SCOPED. They are stored in a separate mem space which is reserved for this block. Also, they can't be accessed outside this block. But var a can be accessed anywhere as it is in global scope. Thus, we can't access them outside the Block.

What is Shadowing?

  •   var a = 100;
      {
          var a = 10; // same name as global var
          let b = 20;
          const c = 30;
          console.log(a); // 10
          console.log(b); // 20
          console.log(c); // 30 
      }
      console.log(a); // 10, instead of the 100 we were expecting. So block "a" modified val of global "a" as well. In console, only b and c are in block space. a initially is in global space(a = 100), and when a = 10 line is run, a is not created in block space, but replaces 100 with 10 in global space itself. 
  • So, If one has same named variable outside the block, the variable inside the block shadows the outside variable. This happens only for var

  • Let's observe the behaviour in case of let and const and understand it's reason.

    let b = 100;
    {
        var a = 10;
        let b = 20;
        const c = 30;
        console.log(b); // 20
    }
    console.log(b); // 100, Both b's are in separate spaces (one in Block(20) and one in Script(another arbitrary mem space)(100)). Same is also true for *const* declarations.

    Block Scope Explaination

  • Same logic is true even for functions

    const c = 100;
    function x() {
        const c = 10;
        console.log(c); // 10
    }
    x();
    console.log(c); // 100

What is Illegal Shadowing?

  •   let a = 20;
      {
          var a = 20;
      }
      // Uncaught SyntaxError: Identifier 'a' has already been declared
    • We cannot shadow let with var. But it is valid to shadow a let using a let. However, we can shadow var with let.
    • All scope rules that work in function are same in arrow functions too.
    • Since var is function scoped, it is not a problem with the code below.
      let a = 20;
      function x() {
          var a = 20;
      }

Watch Live On Youtube below:

Block Scope & Shadowing in JS Youtube Link