Block Scope and Shadowing in JavaScript

→ 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 asundefined as a part of hoisting (in a seperate memory spacecalled Block)? While, a is stored inside a GLOBAL scope.? Thus we say, let and const are BLOCK SCOPED. They arestored in a separate memory space which is reserved for this block.Also, they can't be accessed outside this block. But var a can beaccessed anywhere as it is in global scope. Thus, we can't accessthem 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 the same named variable outside the block, the variable

inside the block shadows the outside variable. This happens only for

var.

Let's observe the behavior 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.        

** The 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;
}