{
  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.
}

{
  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.

flowchart TB
    subgraph Global["Global Scope"]
        GlobalVar["var a = 100
(accessible everywhere)"]
    end

    subgraph Block["Block { ... }"]
        BlockVar["var a = 10
(shadows global a -> overwrites it)"]
        BlockLet["let b = 20
(block scoped - separate memory)"]
        BlockConst["const c = 30
(block scoped - separate memory)"]
    end

    GlobalVar -.->|"Shadowed!"| BlockVar

    style Global fill:#7c3aed,color:#fff
    style Block fill:#1e293b,color:#fff
    style GlobalVar fill:#4f46e5,color:#fff
    style BlockVar fill:#dc2626,color:#fff
    style BlockLet fill:#059669,color:#fff
    style BlockConst fill:#059669,color:#fff

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.

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.

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

let a = 20;
{
  var a = 20;
}
// Uncaught SyntaxError: Identifier 'a' has already been declared

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