BLOCK SCOPE & Shadowing in JS 🔥| Namaste JavaScript 🙏 Ep. 9

Let & const Block Scope in-depth tutorial covers what is a Block, Scope, and Block Scope in JavaScript. With live code examples and detailed explanations, we also will see what is Shadowing in JavaScript. We also talk about Illegal Shadowing and how different variable declarations using var, let and const behave differently when initialized in the Block Scope.

Block Scope has a lexical behavior and also follows rules of the Lexical Scope chain. This video covers everything that happens under the hood. The video is a little long but I REQUEST YOU to watch it fully, this concept will help us in later videos. 🙏

Topics covered :
00:00 - Introduction - Block in JavaScript Interview Question
00:43 - What is a block in JavaScript?
04:09 - What is a Block Scope and Lexical Scope Chain
07:59 - What is Shadowing in JavaScript
14:22 - Illegal Shadowing in JS
16:46 - Lexical Block Scope with Code Examples
18:40 - Arrow Functions Scope and the
19:09 - Teaser of the next Surprise Video
19:16 - Thank you for watching Namaste JavaScript 🙏

Support this video series, NOT BY MONEY, but by sharing it with your friends. 🙏
I'll give my best to come up with great content and everything absolutely for free on YouTube. 😊

If you are active on Social Media,
please give a shoutout to Namaste JavaScript and help me reach more people. 🙏

Cheers,
Akshay Saini

Would love to Stay Connected with you ❤️

#NamasteJS #AkshaySaini

[programmed]

Even the creator of javascript couldn't have made me understand this concept like the way you did brother... Just amazing!

[sakshirathi]

Key Learnings

Block is also known as Compound statements. It is used to combine the multiple statements together

let & const are hoisted in a block scope. var is in global scope

let and const variables are stored in block space, so it is called block-scoped but var variables can be accessed outside the block as it is stored in the Global object memory space, hence it is called Global scoped.

Variable shadowing occurs when a variable declared in an inner scope has the same name as a variable in an outer scope, effectively hiding the outer variable within that scope.

Example 1:
let x = 10; // Outer scope variable
function example() {
let x = 20; // Inner scope variable, shadows outer 'x'
console.log(x); // Prints 20
}
example(); //function call
console.log(x); // Prints 10

Example 2:
var a = 199;
{
var a = 10;
}
console log(a);

variables declared with var are function-scoped or globally scoped, but they are not block-scoped like variables declared with let or const. So, the var a declared inside the block {} will override the outer var a declaration, and the value of a will be 10 when logged outside the block.

var variable of function scoped overwrites the value of Global Scoped variable.

Scope for arrow function is also same!

[drapala]

Indian people always sharing much knowledge!
I'm grateful to Akshay and all of my Indian brothers 🙏

[xFOXHOUND]

First Love your explanation with examples Akshay sir, videos are exact on point!!!
For Revision:
Q) What is block in JavaScript?
> multiple js statements formed in a group enclosed in brackets and it forms a block

Q) What is need of a block/Grouping?
> JavaScript sometimes expect to run a single statement to run, but we need to run commands with multiple statements which is only possible by block

eg. on 4:14

write a simple function:
// even empty script is perfectly valid js script, what about empty brackets!!
{
var a = 10;
let b = 20;
const c =30;
}

When a js script get hoisted (a Global Execution Context) gets created 'var' listed towards 'Global environment' and other variables 'let' and 'const' declarations go to the 'Block environment'

This become especially important when deciding the scope of a particular variable, since b and c are located in 'Block environment' and for a as we know exists in 'Global environment' any statement out of the "Block" can access 'a' ie. ' Variable in Global environment' and other are not!

so when we understand the extent of Global and local environment variables and their 'Scopes' == Environment that forms the lexical hierarchy of 'Scopes' and 'Scopes' have Levels like 'Scope inside scope'

see script in 7:03

var a = 100;
{
var a = 10;
let b = 20;
const c =30;
console.log(a);
console.log(b);
console.log(c);
}
console.log(a);
console.log(b);
console.log(c);

So in block " var a = 10;" influences the value within the block hence console.log(a); >> 10 and outside of the block 'Variable in Global environment' influences value of a hence console.log(a); >> 100

Illegal shadowing:

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

as 'var' declaration goes to 'Global environment' and sets in Memory context, it cannot be set using 'Block environment' value Hence: Uncaught SyntaxError: Identifier 'a' has already been declared

[jagrutsharma]

Things learned:
1. Code inside curly bracket is called block.
2. Multiple statements are grouped inside a block so it can be written where JS expects single statements like in if, else, loop, function etc.
3. Block values are stored inside separate memory than global. They are stored in block. (the reason let and const are called block scope)
4. Shadowing of variables using var, let and const.
5. The shadow should not cross the scope of original otherwise it will give error.
6. shadowing let with var is illegal shadowing and gives error.
7. var value is stored in nearest outer function or global scope and hence can be accessed outside block as well whereas same is not the case with let and const.

[akshaymarch]

How was this video? Are you feeling excited? Let me know in the comments below. ❤️

[iStrikeFirst]

im normally not the one who comments, but because of you my java script foundations are stronger than ever.
so thank you so much.

[Momentswithmanisha]

Block :- It is used to combine multiple statement into one statement so that we can use it at those places where javascript expects to have single statement.
Scope :- scope of a variable or a function is the place where these are accessible.
Block scope :- The variables and function present within the scope of a block section. And block follows the lexical scope chain pattern while accessing the variable.
Shadowing :- Providing same name to the variable as of those variable which are present in outer scope.

Thanks Akshay for clearing the concept so nicely.🙏

[prafulsinghvit]

Now, I am just imagining how much fun it might be for you, when you interview candidates and they give absurd answers to the very core questions like this, and you asking them to go refer "Namaste JavaScript"❤️ 😀

[robertobenedit]

I have had hundreds of tutorials along these years, this "Namaste" series is the best of the best. The junction of simplicity, deep knowing, and pasion is a bullet into the brain, just amazing!

[amitjoshi]

Usually, no one tells you "Illegal shadowing". But you are revealing things so easily, thank you! 😇

[shubhampanwar]

4 days into this playlist, I can proudly say that it's more addictive then a tv series . Next level stuff brother

[vincent]

Akshay is the best Guru ever, why? because it not only teaches basic concepts systematically, but teaches with passion, this can be the initial trigger where students start to be interested in diving further.

Best regards from Indonesia

[sathishpai]

This is what I call Vidyadaan. Thank you Guru :)

Please do keep making videos. I always do keep checking your channel for new videos.

[parmarhitendrasinh]

This series deserves more views and liked it should be on facebook and youtube adds. Its getting more and more amazing.Big Shout out to AKSHAY👏😎👏

[harshilparmar]

Sometimes I feel that I should forget all those js concepts which I learn till now before watching Namaste Javascript...Thanks !!

[tatatabletennis]

We have seen people waiting for Money heist or GOT season release

I am waiting in a similar way for Akshay Saini videos

Namaste JavaScript is a super cool series..

Highly useful for JavaScript lovers

Foundations are getting stronger and stronger

[briandacallos]

No words can even describe you as a teacher, you're explanation is beyond compare.

[JS-zmse]

This series in giving content like no other on YouTube. I request you to keep doing the same. We will be grateful to you.

[rk_modi]

I have seen many js videos all over youtube but the way you describe, the deep dive into the concept you go is outstanding.