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

i was taking an interview and i asked the candidate what is a block in javascript you know what the candidate replied let n const are block scoped this is what the candidate replied i asked him okay let him const are blog scoped but what is a block in javascript so you know what the candidate said the candidate said that block is a space where let and const variables exist and not just that candidate there are a lot of developers out there who don't know what is a block what is a scope these two are separate things but don't worry let's dive deep into these concepts of block scope and shadowing in this video okay just keep watching first of all let's dive deep into blocks okay so a block is defined by these curly braces okay this is a perfectly valid javascript code this is a block okay and it's not doing anything right if you run this program it does nothing but why do we use it what is the use of this block first of all let me tell you block is also known as compound statement okay you know a block is used to combine multiple javascript statement into one group okay so just like this okay so what is this block doing this is combining multiple javascript statement into a group now you will ask me why do we need to group all these statements together we need to group these statements together so that we can use multiple statements in a place where javascript expects only one statement i know it's confusing so let me repeat it listen to this very carefully we group multiple statements together in a block so that we can use it where javascript expects one statement sounds confusing let me show you an example okay so suppose if you have a normal if okay let me use true over here so if i run this code right it gives us an error it says that it is a syntax error why it's a syntax error because this if expects a statement over here okay it expects a statement over here one statement okay this one statement can be anything okay we can just write true also right so this is a perfectly valid one statement but if you want to write multiple statements you can only do that by grouping them together okay so you can use this block and group these statements and you can use them together inside it over here that is what the use of block is so these group of multiple statements can be used in a place where javascript expects a single statement okay so in if it expects a single statement here okay it expects a single statement here after this that is the correct syntax of if okay but we want to use multiple statements so we use something like this this is a block which is wrapping up our multiple statements okay it is grouping together multiple statements so that we can use it in a place where javascript expects one statement very important concept and that is the reason why we often use if without any curly braces right if in itself doesn't have curly braces in its syntax right it does not have right we can directly use something like this right it's it's a perfectly valid javascript code isn't it right but if we want to write multiple statements in place of this statement we need to use a block here okay we need to have a block which combines multiple statement and that's the same reason we combine a lot of statements inside this block and use it with for loops while loops and all other places right so this is a block and this is its use so now when we know what is a block now let's see what is a block scope okay so block scope means what all variables and functions we can access inside this block okay that is known as block scope what is the scope of this block what all variables and functions we can access inside this block and to understand that let us declare three types of variable here and see how they behave inside this block okay how hosting works inside the block and how things work behind the scenes for that let us take where let and const all the three variables okay i have taken where is equals to 10 let b is equals to 20 and let us also take a const c is equals to let's say 30 okay so let us now go deep inside the browser and put a debugger on the first line itself okay and now let us see how these three behaves behind the scenes okay so if i put a debugger let's see what happens in case of hosting let me just run this code and observe very carefully this scope okay i am running this code now you see something interesting right see this so this is the block scope and we got b and c inside this block scope okay this let and const these things these two variables are inside this block scope okay this is a separate space where these b and c are hosted okay these are hosted and assigned undefined remember from the hosting video these are hosted in a separate memory space that is reserved for this block okay and in case of this var a that a is hosted inside this global scope see this so this a is undefined which is inside the global scope and these let and const are in block scope that is why that statement comes into picture let and const are block scoped that means they are stored in a separate memory space which is reserved for this block okay and you know once javascript is finished executing this block right when it goes to line number five you know these variable let and const are no longer accessible okay you cannot access these latin cons outside this block that is known as latin const are in block scope whereas you can access this where even outside because it is in the global scope so let's see in that in the action okay so if i do a console log of a over here and if i do a and if i do the console log of all of them okay so let's see what happens so now let me just remove this debugger and see what it prints in the console okay let me just run this again and see so now it prints the value of abc from this line number 5 6 and 7 okay 10 20 and 30 and it also prints a from here line number 9 but it cannot access b and it stops the program and it throws an error and it says that reference error b is not defined because b was not in the global scope and if i also put a debugger over here right in this console.log line see when when we have finished executing this block right so that block scope is gone from the scope now okay now block scope is no longer there in this scope okay now we have moved to the global scope and only 10 a is accessible here okay so that is how it works now let us see what is shadowing in javascript okay so for that let me just remove this and i'll tell you what is shadowing so if you have a same named variable outside this block okay so this variable shadows that variable okay i'll tell you if we have same named variable outside this block okay so this variable shadows this variable okay so what does that mean if i try to access a inside this block this variable shadows this variable okay that means the value printed would be 10 now okay let me show you in the console if i run this program so see we get 10 20 and 30 so that means this a was shadowed this was coming from this line number three and not from line number one this is known as shadowing okay so this is what happened and if i go outside this block and try to print this a once again let us see what we get what do you think we will get okay so let me just paste it and we see a 10 again okay so that means this variable was shadowed and it also modified the value of this a okay why because they both are pointing to the same memory location okay let me put a debugger and let me show you see remember that the a was in the global scope and a was not in the block scope and this a was also in the global scope okay so when you run this program when the line hits this code it sets a 200 and i have put a debugger over here right so if i execute this line number 3 also now this 100 will change to 10. now carefully watch when i when i run this code now carefully watch over here 100 will be transformed to 10 in the global memory itself see see now a is 10 now okay and these both places line number 6 and 10 both are referring to the same memory space that is the global space okay that is why if i run the code it says it shows 10 over here it actually modifies the a again but that is not the case in let okay let's see why and how so suppose if i had this variable let b is equals to 100 okay and we have another b over here so let me run this code if i run this code again remove the debugger and see in the console what do we expect to see the output okay if i run this it says 10 20 30 okay i forgot to put in b here let me put b here so if i run this code see it prints 10 20 13 order the same way this b shadowed this variable okay it is known as shadowing okay it does not change anything but if i access b outside now i don't now i see something interesting right now this b is different than this b so this b had a block scope and this b had another scope okay so if i go dig deep and put a debugger let us see how this look like so if i run the code okay see now you see something more interesting right so now if you carefully observe this scope right so we have beat in two places okay so one is this b which is outside in line number one this b is this script okay it's not even in the global okay it is in the script which is outside of the block okay and one b which is in the block scope okay so now here we have three type of scopes first is the global scope where these were where attaches right this global object where this where is attached this a is attached over here and another are these separate memory space remember where latin const were hosted and put in a separate memory space right so that is this script space okay and we also have a scope or a separate object in memory for this block itself okay and this b and c resides over there so now if i try to log b inside this block okay so it refers to this block scope okay and if i refer it outside this is this script okay this is outside scope this is hundred so that is why it prints 20 and 100 separately okay and that is what is known as shadowing so this b over here is 20 is shadowing this b's value of 100 over here okay got it this is an interesting thing right and similar thing happens with const also okay so if you have a const c over here okay if you have a corn c over here and if you try to log const c here okay so let me just remove this debugger and run the program let's see so if you see again this c outside is hundred and c inside was 30 so 10 20 30 these three lines printed 10 20 30 and outside we printed 100 that was coming from a different memory space altogether okay so now when we are talking about shadowing let me show you another important thing that shadowing is not only a concept of block okay it is it behaves the same way even in the function also okay so even if we have a function scope the shadowing behaves in a similar way it again shadows okay so let me give it a name and if if you see see it again shadows so ah so this c is coming from this c here okay if i try to invoke this function also so let us see so it works the same way this is known as shadowing so now let us see what is illegal shadowing okay there is something known as illegal shadowing okay so if i try to shadow a where a is equals to 20 okay inside a block okay so you can shadow it easily but what if you try to shadow a let variable inside a block using where okay this is also shadowing right can we do that no we cannot do this okay it says that a is already been declared okay so it is like illegal shadowing you cannot do this shadowing so if where if you want to shadow let variable inside the block scope using a var you cannot do that okay but what if you want to do it with a lit now this is perfectly valid you can shadow a let using a let okay but you cannot shadow a let using var this is illegal shadowing okay and what a vice versa what do you think will happen okay can we shadow like this yes we can this is perfectly valid we can shadow like this javascript will not throw any error here why let me tell you let's go deep and see more okay so see when you put a let here and if you do a var here okay if a variable is shadowing something right if this is shadowing something it should not cross the boundary of its scope okay in a particular scope a led cannot be redeclared right so where should not cross this limit or the boundary over here okay and when i say not crossing boundaries so what are the boundary of where remember a var is a function scoped okay so if i use a function over here okay if i put a function over here function x and if i do like this right now it won't show any error because this var is inside its boundaries okay it is not interfering with this a now so this is fine okay this is not an illegal shadowing and if you talk about const it behaves the same okay if you do a const over here and you do a const over here it is also in its memory space and it is totally fine so remember in the previous scope video i told something known as lexical scope so yes block scope also follows lexical scope okay so these scope are lexically present okay so when i say lexical that means one inside another remember from the previous video so if i have const a again inside it right so 20 100 and let's say this is 200 okay so when i say lexical scope that means if you try to access a inside this function right so now this a will get access from this nearest a okay this 200 will be printed okay and if i try to print this a outside the scope okay now what you will see see it gives you hundred so now let's put this here and see another interesting thing okay if i put this here and if i see dig deep inside the browser okay if i put a if i put a debugger over here let us run this code and see now you see interesting thing right see each and every block has its own lexical scope okay this block is inside one then inside then script then global something like this and it again follows that scope chain pattern lexical scope chain pattern okay so if a was not here okay if a was not here so what will happen now if you run this code you will get it hundred okay okay you will get hundred let's remove this let's get back here and if this console log is printed right outside okay you see 20 here so lexical scope works the same way inside the block also and let me also talk about arrow functions so let me tell you that whether you declare a function with function keyword or an arrow function we feel that those might have different scope but they are exactly same thus all these scope rules which work on functions are exactly same in the arrow function also so no need to worry about learning differently scope for arrow functions than normal functions they are absolutely same that's all in this video the next video will be a surprise okay i won't tell you what it is but do watch it it is very important before moving to that surprise video give this video a like and tell me in the comment section whether you understood the block scope block scope and shadowing or not did you find this video helpful just comment down and let me know it gives me a huge motivation till then thank you for watching namaste [Music] javascript [Music] you

Channel: Akshay Saini

Views: 90,649

Rating: 4.9774046 out of 5

Keywords: Block scope, lexical scope, block in js, scope in js, shadowing in javascript, illegal shadowing, let and const in javascript, var let const, es6 let and const, block scope, let and const scope, arrow function scope, Javascript course, Namaste javascript, akshay saini, javascript, javascript tutorials, best javascript course, javascript video series, javascript fundamentals, namaste js, javascript core concepts, advanced javascript, shadowing, let const bock scope

Id: lW_erSjyMeM

Length: 19min 57sec (1197 seconds)

Published: Sat Nov 07 2020