Part 10 : Block Scope, Function Scope and Shadowing in JS.

What is Block ?

1. Block is defined by curly braces i.e { .. }
2. Block is also know as Compound Statement.

Why Block is required in JS?

Block is used to combine multiple javascript statements into one group.

Why we need to group multiple statements at one place?

we group multiple statements in a block so that we can use it where JS expects one statement

Example: if statement only expecting one statement but we provided multiple statements using curly braces. This is a Block.

if(true){
// Compound Statement
var a = 10;
console.log(a);
}

— — — — — — — — — — — — — — — — — — — — — — —

What is Block Scoped?

Block Scoped means what all variables and functions we can access inside block.

To understand in details, let’s take an example and run it:

{
var a = 10;
let b = 20;
const c = 30;
}

So, “b” and “c” are inside Block Scope which is separate space which is reserved for block only. But “a” is hoisted inside global object.
From here the statement comes in picture that:

let and const are block scoped.

Therefore, you can’t access let and const type variable outside the scope .

{
var a = 10;
let b = 20;
const c = 30;
console.log("Inside Block a= ",a);
console.log("Inside Block b= ",b);
console.log("Inside Block c= ",c);
}
console.log("Outside Block a= ",a);
console.log("Outside Block b= ",b);
console.log("Outside Block c= ",c);

So, it is saying “Reference Error: b is not defined” . Because “b” is not in global scope.

— — — — — — — — — — — — — — — — — — — — — — — — — — — —

What is Shadowing in JS?

If we have same named variable outside the block, then block variable will shadowed outside block variable.
Example:

var a = 12;
{
var a = 10;
let b = 20;
const c = 30;
console.log("Inside Block a= ",a);
console.log("Inside Block b= ",b);
console.log("Inside Block c= ",c);
}

What will log print for “a” now?

Output:

It prints 10. That means line 3 variable shadowed Line 1 variable.

* What If I try to print var “a” outside block ? What should it print 10 or 12?

var a = 12;
{
var a = 10;
let b = 20;
const c = 30;
console.log("Inside Block a= ",a);
console.log("Inside Block b= ",b);
console.log("Inside Block c= ",c);
}
console.log("Outside Block a= ",a);

Output:

So , it prints 10 again. Line number 3 shadowed line 1 and also modified the value for variable. Because they both are pointing to same memory location.

* Now what happens with “let” type variable?

let b= 12;
{
var a = 10;
let b = 20;
const c = 30;
console.log("Inside Block a= ",a);
console.log("Inside Block b= ",b);
console.log("Inside Block c= ",c);
}
console.log("Outside Block b= ",b);

Output:

Now, Inside block variable “b” prints 20 but outside block , it prints 12.
Because scopes are different in case of let type variable. Try adding debugger and check scope of variables.

In above screenshot, you can see three scopes ::::

1. Global: memory reserved for var
2. Script: separate memory forletand const outside block scope
3. Block: separate memory for variables inside scope

* Now what happens with “const” type variable?

const c= 12;
{
var a = 10;
let b = 20;
const c = 30;
console.log("Inside Block a= ",a);
console.log("Inside Block b= ",b);
console.log("Inside Block c= ",c);
}
console.log("Outside Block c= ",c);

Output:

Now, Inside block variable “c” prints 30 but outside block , it prints 12.
Because scopes are different in case of const type variable. Try adding debugger and check scope of variables.

Again, in above screenshot, we can see 3 scopes.

— — — — — — — — — — — — — — — — — — — — — — — — — — — —

Does Shadowing behaves same way in functions?

const c= 12;

function a() {
const c = 30;
console.log("Inside Function c= ",c);
}

a();

console.log("Outside Function c= ",c);

Output:

Now, Inside function variable “c” prints 30 but outside function, it prints 12.
Because scopes are different in case of const type variable. Try adding debugger and check scope of variables.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — —

What is Illegal shadowing?

Case 1: If outside block variable is “let” and inside is “var” type? Will it still gives error?

let a = 20;
{
    var a = 10;
}

Can we do this? What will be the output now?

So, this is known as Illegal Shadowing.

Case 2: But what If outside block variable is “var” and inside is “let” type? Will it still gives error?

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

Answer is NO .It won’t give any error and work perfectly fine.

WHY?

Because if a variable is shadowing something, it should not cross the boundary of it’s scope.

In Case 1: var is not blocked scope. “var” is function scoped. So you can do it inside a function.

let a = 20;
function b() {
    var a = 10;
}
b();

Now, in this case, var a is not interfering with let a as both have different memory.

Now, Try below on your own, add debugger and see how scopes work:

Case 1:

const a = 20;
{
  const a = 30;
  console.log("Inside Block 1, a = ",a);
  {
    const a = 40;
    console.log("Inside Block 2, a = ",a);
  }
}
console.log("Outside Block, a = ",a);

Case 2:

const a = 20;
{
  const a = 30;
  console.log("Inside Block 1, a = ",a);
  {
    console.log("Inside Block 2, a = ",a);
  }
}
console.log("Outside Block, a = ",a);

These examples also cover Lexical Scope Chain pattern we covered in previous article.

With this, we cover our basics for Block Scope, Function Scope and Shadowing.

⭐️Happy Coding. ⭐️

Hopefully, you learned something today! Before you go:

• 👏 Clap for the story and follow Swati Redhu 👩🏻‍💻
• 📰 View more content in the JavaScript learning roadmap 2023 — The Ultimate Guide ❤️
• 🔔 Follow on : LinkedIn

🚀👉 Clear your JS basics and find an amazing job