Block Scope & Shadowing in JS🤯

Block

A block, also known as a compound statement, is defined by curly braces {}. It groups multiple JavaScript statements together into a single unit.

{
  //compound statement
  var x = 60;
  console.log(x);
}

Block Scope

Block scope means that all variables and functions declared inside a block {} are accessible only within that block.

{
  var x = 36;
  let y = 27;
  const z = 78;
}

let and const have separate memory and are block-scoped, whereas var is function-scoped or globally scoped.

{
  var x = 36;
  let y = 27;
  const z = 78;
  console.log(x); //36
  console.log(y); //27
  console.log(z); //78
};
console.log(x); //36
console.log(y); //ReferenceError: y is not defined
console.log(z);

We can access var outside the block because it has global or function scope. However, let and const cannot be accessed outside the block because they are block-scoped.

Shadowing

If we have a variable with the same name both outside and inside a block, the variable inside the block shadows the one outside.

var x = 57;
{
  var x = 36;
  let y = 27;
  const z = 78;
  console.log(x); //36
  console.log(y); //27
  console.log(z); //78
};
console.log(x); //36

In this example, we have two variables with the same name (var x). The variable var x = 36 shadows the variable var x = 57. Both variables share the same memory space. As a result, the value of x is first assigned 57 and then modified to 36, since they both point to the same memory location (They are in global scope).

let y = 51;
{
  var x = 36;
  let y = 27;
  const z = 78;
  console.log(x); //36
  console.log(y); //27
  console.log(z); //78
};
console.log(y); //51

In this example, we have two variables with the same name (let y). The variable let y = 27 shadows the variable let y = 51. This code has three scopes: global scope, block scope, and script scope (let and const have separate memory spaces). The variable let y = 27 is block-scoped, while let y = 51 belongs to the script scope. As a result, console.log inside the block outputs 27, and outside the block, it outputs 51

The same applies to const as well.

const z = 21;
{
  var x = 36;
  let y = 27;
  const z = 78;
  console.log(x); // 36
  console.log(y); //27
  console.log(z); //78
};
console.log(z); //21

Illegal Shadowing

let x = 4;
{
  var x = 7;
};// SyntaxError: Identifier 'x' has already been declared.

We cannot shadow let using var. This is illegal shadowing. But the opposite is possible. We can shadow let using let.

var x = 4;
{
  let x = 7;
};
--------------------------------------
let x = 4;
{
  let x = 7;
};
--------------------------------------
const x = 4;
{
  const x = 7; // This is also possible
};

Credits to Akshay Saini. [(https://youtu.be/lW_erSjyMeM?si=2sy5sBnA8mgfLVRn)]