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.
In point number 2 I want to add something. If function is defined using the "function" keyword, then "{}" are a part of its syntax. If we miss that we will get error. But in case of arrow functions, it is fine when we have just one statement in it, we can opt out "{}".
we can shadow a let variable with var only if we are declaring it in a function as explained by @abdullahsoomro6238 { } is part of function's syntax. for ex: let a = 10; function func(){ var a = 20; } this wouldn't give any error
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
Here a question then : var a=100; { console.log(a) var a=10 } What would be the expected value of this program according to the concepts explained? Since we say the block influences the variable, then will we get undefined(due to variable being referred before it was declared in the lexical scope) or will we get 100?
@@dgdivyanshugupta first var a=100 affect the inner scope value (consider it as a onion) as outer exec context is covering inner exec. context so sorry for super late reply
@@dgdivyanshugupta var doesn't follow block scope so your code is basically the same as var a = 100; console.log(a); var a = 10; So the code will log the value 100. Now lets say we had let or const instead of var in your code. So the code becomes: let a = 100; { console.log(a); let a = 10; } Since let and const follow block scope, the above code will throw a ReferenceError saying it cannot access 'a' before its initialized. The best way to understand this is by looking at those brackets {}. SInce a is being logged on to the console before its initialized in the {}, it throws an error. Thats what block scope's all about.
I have a question on illegal shadowing. let a = 200; { var a =20; } `let` goes to different memory called "script" and var goes to "Global". Why is it mentioned as crossing boundaries in the video. Can someone please explain me this.
Next Video: CLOSURES in JS 🔥 - ua-cam.com/video/qikxEIxsXco/v-deo.html How was this video? Are you feeling excited? Let me know in the comments below. ❤️
Are functions block scoped? When I declare a function inside a block, then I could see it in global scope as undefined hoisted. When execution enters inside the block, then the function is seen in the Block scope as well as global scope? Is this some other concept?
Thank you sir for making these videos. After watching your video i played with my program to see How it handle everything behind the scene and after sometime i found some interesting things that when u use type="module" in your script tag the js engine will put all the variables and func. and class in module scope also when we put a function in block it behave differently . Sir can you make a video On this topic ? Thank you very much and stay healthy
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"❤️ 😀
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
@@akshaymarch7 Akshay, for the first time, I found your teaching a bit confusing and unclear. I just wish you had included the visual representation of everything in this lesson. (Remember how you drew the execution context, the memory phase, the code phase? It was perfect! I wish you had visually INCORPORATED the scope concept into your drawing. The visual representation was great, but when you teach new things, it will raise questions; how should I draw the script, the global scope, etc etc in my visual drawing?) Thanks,
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
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.🙏
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!
can you explain how he has excuted they .js file with the help of livesever or some other way because while implementing practically I can't able to debug like him in chrome
If you didn'nt understood illegal shadowing read this....... illegal Shadowing : var is not scoped to the block it's in, it's scoped to the containing function. If there is no containing function, it ends up in the global scope. Hence it conflicts with the let a declaration which is conflicting during code component phase
@@jamalbutt7864 lexical scoping comes here( when in block let a is checked the block also have access to global) which create a conflict during run time
Here is the full notes of the video: 1. Block : { }, this is a perfect example of a block. Block is also known as Compound Statement. Block is used to combine multiple JS statements into one group. 2. Block scope means what all variables and functions we can access inside the block. 3. Eg : { var a = 10; let b = 20; const c = 30; } 'a' is hoisted in the global memory space, whereas let and const i.e., 'b' and 'c' are hoisted in some other memory space which is known as "Block". And that's why we say let and const are block scoped. When JS engine finishes executing this block, 'b' and 'c' will be no longer accessible outside this block. But you can access 'a' outside of this block, because 'a' is globally scoped. 4. Eg : var a = 100; { var a = 10; console.log(a); } Output : 10 Here, local variable 'a' shadows the global one in that block, that's why the value of 'a' in the block is 10 and not 100. Moreover, the value of 'a' is altogether changed to 10, and that's why if you'll try logging 'a' outside this block, you'll get its value as 10. This happened because both the 'a' are pointing towards the same memory location, which is there in the global scope. But, this is not in the case of let and const declarations, local let declaration cannot shadow the global let declaration, in a block. Eg : let a =1; { let a = 10; } The local 'a' here cannot shadow the global 'a' here, because the scopes in which these 'a' are falling are different, and hence the memory locations of both these variables will be different, local 'a' is stored in Block while global 'a' is stored in global memory space. Hence, the manipulation in one cannot affect the other. Similar type of behavior is also expected in case of const declarations. Shadowing works the same way in case of functions as well, since we can assume functions as a block only. 5. Illegal Shadowing : Eg : - let a = 10; { var a = 20; } This is an example of illegal shadowing, you cannot shadow a let variable using a var declaration in a block. You can shadow a let declaration using a let, but not var. Because, in the same scope, let cannot be re-declared. But, we can shadow like this : let a = 10; { let a = 20; } Because, here 'a' has different scopes, one is block and one is global scope, so re-declaration can be done here. 6. Lexical block scope with code example : Eg : - let a = 10; { { console.log(a); } } In the above example, the variable 'a' is declared in the global scope, but this 'a' can be accessed inside any block or any inner block. Firstly, the JS engine tries searching for 'a' in the current block it is executing, if it does not find there, it searches 'a' in the immediate ancestral lexical environment, and if still does not find there too, it expands it search to higher ancestral lexical scopes, it finds 'a' in the global scope, took its value, and printed on the console.
#LovingIt Please continue this series sir. If you continue then after 2 or 3 months I will become a decent JS developer. Lots of Love and Happy Dewali.
Although I know this video gonna be another hit coz you explain everything so amazingly and in depth. Anybody watching these js videos will definitely fall in love with JavaScript. Please it’s a request make videos on more JavaScript concepts and also on Angular 6+ concepts. 👍
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!
Summary: - Block or compound statement are code inside a curly brackets ({}) - Block compains multiple statement into one group. - Block can use in where js expects single statement. - Block scope means that what all variables and functions that can access in block. - Block scope also follows lexical scope. - Let and const are block scope means, they are stored in separate memory space which is reserved for these block. - Shadowing in js, means use same variable name to shadow variables which is outside the scope. - In function scope it is also shadow similar way. Arrow function scope is same as funcition scope. - Illegal shadowing happens when a let or const is shadowed using var in block scope. But in function scope this is allowed.
let a =20; { var a= 10; } I have a doubt , why this code gives error ? let a is allocated in script var a is allocated in global. So they are in different memory space then why do we get error? i know that var is function scoped not block scoped but still they are in different memory right?
This video is again one more gem from Akshay.... thanks for taking your time for the world.... in the end you have mentioned that normal function and arrow functions are same could you please also explain why then bind apply call not works with arrow functions....if you can make a video on this it would be very very helpful to clear the conflict between these two types of functions. Thanks again for this awesome work
Let me correct, I said `Scope behaves the same way in Arrow functions, just like Normal functions` 😇 But arrow functions are NOT same as Normal functions. Actually, I've planned to make a separate video altogether for `Arrow Functions`, keep watching brother. Everything will be covered. ❤️
Hello akshay, some of your videos are unavailable like event loop and javascript engine. Please look into it brother as I need them really badly right now.
No Such Thing As Bad Student, Only Bad Teacher.....I don't know but this quote strikes in my mind after watching half series...Loved it Akshay bhai😊😊🌟🌟
Never in my life i ve dived this deep in concepts of any language ALL Thanks To you Brother , you made all these interview topics so easy that one can easily understand and answer all the questions plus this mad javascript more fun to learn
I think shadowing only happens with let and const variables? var by defacto is function scoped, and if you just create a block, it just creates it in the outer global scope only, and the rest all are just modifying the value.
Cannot even imagine how much research and work must've gone into this. Also dissecting it into simple understandable bits. You are the best teacher ever ❤️
Hi Akshay Thanks for making this videos.They are indeed very helpfull.Could you please make a video on closure as it is quite confusing and mostly asked concept.
Great explanation akshay and it's really commendable that even after having a full time job you are taking out so much time to help everyone with such great content. Hats off to you.
Nice videos Akshay! I have one doubt, If let creates a different scope for 'a', then why can't we shadow it using var, it will be a different scope, right?
I think because var has scope outside the block as well. So when control exits the block and comes into global scope, var a comes into direct conflict with let a. This is a case of redeclaration which let doesn't allow. That is why, we can shadow let a by function-scoping the var a.
Because var is not block scoped. It is global scoped and functional scoped where as let and const are block scoped and functional scoped. So var inside block scope is allocated in global memory and then we have let variable so we get error as it already exists.
It is because 'let' cannot be redeclared within its scope. Since 'var' has a functional scope and not a block scope it will try to redeclare the 'let' variable which is not allowed.
Even on my last interview which I have appeared a few weeks ago, I told the same to the interviewer about "let and const" without knowing what is the in-depth mechanism behind it. These explanations were really in need, even for person who are experienced in JS. THANK YOU AKSHAY!! 😊😍💖💖
this is one of the most important concept and trust me in interviews i have seen like 100 of questions which directly and indirectly comes from this concept.... very well explained.... thanks a lot Akshay bhaiya....
Block is set of statements in JS where Js expects a single statement. Lexical scope (Local memory + Reference to Lexical enviroment of its parent) works same inside the block also. let and const are block scoped and they would reside in a separate memory called block unlike var which has global scope. Shadowing is basically overriding of the variable. Illegal shadowing:- Shadowing of let to var and it will throw syntax error.
You are an amazing tutor. Early morning 3 and I am studying using your videos 😛. 🙂I had a doubt in Function scope of shadowing. You said it works in similar way as to block. But as per your call stack video( and when I tried it too), Function scope and block scope differs for "var" variables but works similar for let &const(which you mentioned).In function scope, only shadowing occursfor "var" and not overwriting as in normal block. Kindly let me know if I got it wrong or right
To clarify that, you need to take a short look back and reframe, what a block and a function is. A function is a set of actions that can be performed. It has its own execution context, and declares memory space in the global scope. Combined with a statements that are stored in a block the function can be called after wards. A single block by itself will be stored in a memory space for blocks, when not used in functions. It is just the group of statements bundled together. When not used in functions, its mostly used with other flow conditions, that will be called if a statement is true of not. So blocks can just be called by other statements/or conditions like loops ecetera. They do have a own "lexical scope or in that case block scope". Thanks for my self answering my question one month later.
Thank you Akshay for another wonderful video. Your way of explaining the things is amazing. I wish this series will never end, then only the myth of "You don't know JS" will become "I know everything in JS". THANK YOU AKSHAY. 🙏♥️
shadowing of var is working differently in {} and function {} why ? var b =100; function x() { var b=10; console.log(b) } x(); console.log(b) result : 10,100 ------------------------------------------------------------ var b =100; { var b=10; console.log(b) } console.log(b) result : 10,10
Hi Akshay, I had a question about when we invoke functions js creates an execution context for the same, so when we have only a block { } in js and execute the file does JS also creates an execution context for the block?
Block: Means the code or statement written inside the bracket {}Block Scope: Means the methods of accessing declared values inside the block e.g Var: functional scope: Only can access inside the function Let and Const: Only can access in the same block where they are declared Shadowing: Means shadowing value inside a block of declared variables globally e.g var a=100function a(){var a=10;console.log(a);}a() It will print 10, coz a is accessing its nearby deaclaired value and has block sope is its shadowing a value of a declared outside of function
Things learned: 1. Code inside curly bracket is called block Or Compound Statement. For Ex: { console.log("Curly Bracket"); } 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. For Ex: var a = 5; function takeIt( ){ var a = 20; console.log(a); } 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 stored in global memory and hence can be accessed outside block as well whereas same is not the case with let and const. 8. If we created same name variabel outside function so it will Shadow inner one value.
inside the functions {are also a block }, it stores the variable in local memory space, but incase of if , for, while also a block it stores variable in in the block memory space, why?
Again an amazing video. And I request to everyone(inc. ME), to practice this shadowing concept right now to understand in-depth, otherwise, we may easily forget.
Local BLock SCript GLobal it may helpful see the how memory was allocating. let ag6 =9883 // allocating in the script { let ag1 =345 // allocating in the block var ag4 = 9923 // allocating in the global } function afun(){ var ag2 =8999 let ag3 = 9232 console.log('hell') } afun() // allocating in the global const bfun= ()=> { let ag7 = 2332 const ag8 = 2232 var ag9 = 23221 { var ag10 = 989823 let ag11 = 23423 { var ag12 = 23423 } } } bfun()
I understood well enough so that I can explain another person and your channel is very important for JavaScript developer so I have shared it to my friends
The reason why we can not shadow a let with a var is because if a variable is shadowing something, it should not cross the boundary of its scope. Now, var is not block scoped, it is function scoped. Now, as it is not block scoped, it interferes with the variable outside of block and hence this error happens.
why does hoisting work for let and const in block but not in script { console.log(b); let b = 100; console.log(c); const c = 1000; } // prints undefined twice but ------------------------------------------------ console.log(b); let b = 100; console.log(c); const c = 1000; // prints Cannot access 'b' before initialization error
Bhaiya you told that if we have `console.log(x)` in our program then, under the hood, it's treated as `console.log(window.x)` Then why `console.log(x)` gives ReferenceError while `console.log(window.x)` gives undefined as output.
Even the creator of javascript couldn't have made me understand this concept like the way you did brother... Just amazing!
Couldn't agree more💯
You are absolutely correct.
Absolutely Right
Totally agreed!!
ok this is too much
I have seen many js videos all over youtube but the way you describe, the deep dive into the concept you go is outstanding.
I love his teaching style. He is phenomenal. Lots of love from Nepal❣❣❣❣
Akshay you are awesome and with help of you and your video I cleared my round.
video was super helpful! but now i need to go back and watch the rest. thank you + namaste
😁😁 wait is over ...this is what we are expecting from you 💪👍
god level as usual. hatsofffffff
Understood it, loved it
Nicely explained
better than paid video
Very useful content thank you
Bhaiya aapke charan kaha hai..?
Great Explanation bhaiya...
pwoli saanam
i need a brain booster medicine my brain is shocked to see such bizzare behaviour of javascript
Indian people always sharing much knowledge!
I'm grateful to Akshay and all of my Indian brothers 🙏
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.
Great dude you gave me new idea
In point number 2 I want to add something. If function is defined using the "function" keyword, then "{}" are a part of its syntax. If we miss that we will get error. But in case of arrow functions, it is fine when we have just one statement in it, we can opt out "{}".
Code inside curly brackets is stored in separate memory space called block for let and const hence they are called block s
we can shadow a let variable with var only if we are declaring it in a function as explained by @abdullahsoomro6238 { } is part of function's syntax.
for ex: let a = 10;
function func(){
var a = 20;
}
this wouldn't give any error
Beautifully summarized.
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
Here a question then :
var a=100;
{
console.log(a)
var a=10
}
What would be the expected value of this program according to the concepts explained?
Since we say the block influences the variable, then will we get undefined(due to variable being referred before it was declared in the lexical scope) or will we get 100?
thanks brother
@@dgdivyanshugupta first var a=100 affect the inner scope value (consider it as a onion) as outer exec context is covering inner exec. context
so sorry for super late reply
@@dgdivyanshugupta var doesn't follow block scope so your code is basically the same as
var a = 100;
console.log(a);
var a = 10;
So the code will log the value 100. Now lets say we had let or const instead of var in your code. So the code becomes:
let a = 100;
{
console.log(a);
let a = 10;
}
Since let and const follow block scope, the above code will throw a ReferenceError saying it cannot access 'a' before its initialized. The best way to understand this is by looking at those brackets {}. SInce a is being logged on to the console before its initialized in the {}, it throws an error. Thats what block scope's all about.
I have a question on illegal shadowing.
let a = 200;
{
var a =20;
}
`let` goes to different memory called "script" and var goes to "Global". Why is it mentioned as crossing boundaries in the video. Can someone please explain me this.
Next Video: CLOSURES in JS 🔥 - ua-cam.com/video/qikxEIxsXco/v-deo.html
How was this video? Are you feeling excited? Let me know in the comments below. ❤️
Shadowing is the new concept I came to know today. very excited about the upcoming video :)
Are functions block scoped? When I declare a function inside a block, then I could see it in global scope as undefined hoisted. When execution enters inside the block, then the function is seen in the Block scope as well as global scope? Is this some other concept?
Thank you sir for making these videos. After watching your video i played with my program to see
How it handle everything behind the scene and after sometime i found some interesting things that when u use type="module" in your script tag the js engine will put all the variables and func. and class in module scope also when we put a function in block it behave differently . Sir can you make a video
On this topic ?
Thank you very much and stay healthy
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"❤️ 😀
Haha, no man. I don't waste time while taking interviews talking all these informal things, every second is precious at that moment. 😇
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
Me too, Me too...
Haha 😅
@@akshaymarch7 Akshay, for the first time, I found your teaching a bit confusing and unclear.
I just wish you had included the visual representation of everything in this lesson. (Remember how you drew the execution context, the memory phase, the code phase? It was perfect! I wish you had visually INCORPORATED the scope concept into your drawing. The visual representation was great, but when you teach new things, it will raise questions; how should I draw the script, the global scope, etc etc in my visual drawing?)
Thanks,
@@farazk9729 watch this same video after a month. you will understand what he is saying.
@@akshaymarch7 plz upload more videos
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
Thank you, Vincent. Love from India ♥️
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.🙏
I should take a snapshot of this comment and post it for people to save it for revision. Thank you for this Manisha ✌️
@@akshaymarch7 Sure , It's all your teaching 🙏.
Thanks broo
@momentswithmanisha.115 ismai aap lexical scope , lexical enviroment, scope-chain ,globel scope , function scope, clousers add kerdeytey too majaa ajaata
@@momentswithmanisha why block scope follows lexical scope chain pattern .
Does new execution contaxt created in case of block like functions
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!
can you explain how he has excuted they .js file with the help of livesever or some other way because while implementing practically I can't able to debug like him in chrome
@@bhavanachowdary3158 he link the js file with html page using script tag
im normally not the one who comments, but because of you my java script foundations are stronger than ever.
so thank you so much.
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👏😎👏
If you didn'nt understood illegal shadowing read this.......
illegal Shadowing : var is not scoped to the block it's in, it's scoped to the containing function. If there is no containing function, it ends up in the global scope. Hence it conflicts with the let a declaration which is conflicting during code component phase
But let is not supposed to be in global scope?
@@jamalbutt7864 lexical scoping comes here( when in block let a is checked the block also have access to global) which create a conflict during run time
Sometimes I feel that I should forget all those js concepts which I learn till now before watching Namaste Javascript...Thanks !!
This is what I call Vidyadaan. Thank you Guru :)
Please do keep making videos. I always do keep checking your channel for new videos.
Thank you so much for your beautiful comment brother. ❤️
unable to access rest 10 videos..they are unavailble and hidden!!! whyyy
Here is the full notes of the video:
1. Block : { }, this is a perfect example of a block. Block is also known as Compound Statement. Block is used to combine multiple JS statements into one group.
2. Block scope means what all variables and functions we can access inside the block.
3. Eg : {
var a = 10;
let b = 20;
const c = 30;
}
'a' is hoisted in the global memory space, whereas let and const i.e., 'b' and 'c' are hoisted in some other memory space which is known as "Block". And that's why we say let and const are block scoped. When JS engine finishes executing this block, 'b' and 'c' will be no longer accessible outside this block. But you can access 'a' outside of this block, because 'a' is globally scoped.
4. Eg :
var a = 100;
{
var a = 10;
console.log(a);
}
Output : 10
Here, local variable 'a' shadows the global one in that block, that's why the value of 'a' in the block is 10 and not 100. Moreover, the value of 'a' is altogether changed to 10, and that's why if you'll try logging 'a' outside this block, you'll get its value as 10. This happened because both the 'a' are pointing towards the same memory location, which is there in the global scope.
But, this is not in the case of let and const declarations, local let declaration cannot shadow the global let declaration, in a block.
Eg : let a =1;
{
let a = 10;
}
The local 'a' here cannot shadow the global 'a' here, because the scopes in which these 'a' are falling are different, and hence the memory locations of both these variables will be different, local 'a' is stored in Block while global 'a' is stored in global memory space. Hence, the manipulation in one cannot affect the other. Similar type of behavior is also expected in case of const declarations. Shadowing works the same way in case of functions as well, since we can assume functions as a block only.
5. Illegal Shadowing :
Eg : - let a = 10;
{
var a = 20;
}
This is an example of illegal shadowing, you cannot shadow a let variable using a var declaration in a block. You can shadow a let declaration using a let, but not var. Because, in the same scope, let cannot be re-declared.
But, we can shadow like this :
let a = 10;
{
let a = 20;
}
Because, here 'a' has different scopes, one is block and one is global scope, so re-declaration can be done here.
6. Lexical block scope with code example :
Eg : - let a = 10;
{
{
console.log(a);
}
}
In the above example, the variable 'a' is declared in the global scope, but this 'a' can be accessed inside any block or any inner block. Firstly, the JS engine tries searching for 'a' in the current block it is executing, if it does not find there, it searches 'a' in the immediate ancestral lexical environment, and if still does not find there too, it expands it search to higher ancestral lexical scopes, it finds 'a' in the global scope, took its value, and printed on the console.
thank you 👍
Usually, no one tells you "Illegal shadowing". But you are revealing things so easily, thank you! 😇
This man's smile gives a lot of positivity❤
This series in giving content like no other on UA-cam. I request you to keep doing the same. We will be grateful to you.
#LovingIt
Please continue this series sir.
If you continue then after 2 or 3 months I will become a decent JS developer.
Lots of Love and Happy Dewali.
Your depth is wonderful
4 days into this playlist , I can proudly say that it's more addictive then a tv series . Next level stuff brother
The way you are explaining( with excitement) awesome bro.. its makes me more interest.
Although I know this video gonna be another hit coz you explain everything so amazingly and in depth. Anybody watching these js videos will definitely fall in love with JavaScript. Please it’s a request make videos on more JavaScript concepts and also on Angular 6+ concepts. 👍
I'm fall in love❤️ with javascript...so I want to marry javascript
@@Pavankumarsinglavqrdoor1242 bhai control
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!
True dude
Best JS tutorial watched ever. Completed the series at a go. Really excited for upcoming videos !!!
Summary:
- Block or compound statement are code inside a curly brackets ({})
- Block compains multiple statement into one group.
- Block can use in where js expects single statement.
- Block scope means that what all variables and functions that can access in block.
- Block scope also follows lexical scope.
- Let and const are block scope means, they are stored in separate memory space which is reserved for these block.
- Shadowing in js, means use same variable name to shadow variables which is outside the scope.
- In function scope it is also shadow similar way. Arrow function scope is same as funcition scope.
- Illegal shadowing happens when a let or const is shadowed using var in block scope. But in function scope this is allowed.
Hey Akshay, i love your enthusiast explaining things sometimes also not easy at all, keep it up bro
To the candidate who answered like that: It's okay! I was also dumb before Namaste JS 🤣
Watching it again to refresh all the topics. please make a series on Nodejs toooo.🤩
let a =20;
{
var a= 10;
}
I have a doubt , why this code gives error ?
let a is allocated in script
var a is allocated in global. So they are in different memory space then why do we get error? i know that var is function scoped not block scoped but still they are in different memory right?
This video is again one more gem from Akshay.... thanks for taking your time for the world.... in the end you have mentioned that normal function and arrow functions are same could you please also explain why then bind apply call not works with arrow functions....if you can make a video on this it would be very very helpful to clear the conflict between these two types of functions. Thanks again for this awesome work
Let me correct, I said `Scope behaves the same way in Arrow functions, just like Normal functions` 😇
But arrow functions are NOT same as Normal functions.
Actually, I've planned to make a separate video altogether for `Arrow Functions`, keep watching brother. Everything will be covered. ❤️
Hello akshay, some of your videos are unavailable like event loop and javascript engine.
Please look into it brother as I need them really badly right now.
No Such Thing As Bad Student, Only Bad Teacher.....I don't know but this quote strikes in my mind after watching half series...Loved it Akshay bhai😊😊🌟🌟
Very easily understandable video. Thank you so much.
your content and the way you explain is amazing :)
I see people are using comment section for taking and sharing their notes, that's what we call learn in public
You really made me fall in love with JS.
If possible please upload react Js and Angular Js videos also.🥺
I don't like this series.
Google needs to add a love sign beside the like button only for your videos.
Thanks a lot for this invaluable thing..
And that's why we use var when we try some code samples in chrome console. cool.
No words can even describe you as a teacher, you're explanation is beyond compare.
What is script scope? How is it different from Global scope?
This video will be awesome I already know...
After watching this series this is my duty to buy react js course so that I can pay fee to my Guru(Akshay Saini ❤)
Never in my life i ve dived this deep in concepts of any language ALL Thanks To you Brother , you made all these interview topics so easy that one can easily understand and answer all the questions plus this mad javascript more fun to learn
I think shadowing only happens with let and const variables? var by defacto is function scoped, and if you just create a block, it just creates it in the outer global scope only, and the rest all
are just modifying the value.
But in case of functional scope it would be same for var as in the case of let and const🙂
Cannot even imagine how much research and work must've gone into this. Also dissecting it into simple understandable bits. You are the best teacher ever ❤️
thank you ❤ so much sir for your dedication !!!
Hugh Respect for your dedication Sir.
block - group of statements enclosed within curly braces { } . It allows us to group multiple statement in single unit
No one has ever explained so neat and clean. Thanks Akshay, you are doing a fabulous job for making it free for us. ❤️
Hi Akshay
Thanks for making this videos.They are indeed very helpfull.Could you please make a video on closure as it is quite confusing and mostly asked concept.
It'll be released today. ❤️
I binged this series and it's the best ❤️
helpful video sir , thank you .
Great explanation akshay and it's really commendable that even after having a full time job you are taking out so much time to help everyone with such great content. Hats off to you.
So nice of you Adeete, thank you for your lovely comment. Feels like the effort is worth it. ❤️
very well understood thank you bhaiya
Nice videos Akshay!
I have one doubt,
If let creates a different scope for 'a', then why can't we shadow it using var, it will be a different scope, right?
hey i have same doubt ... did you get answer
@@rhythm1723 not yet
I think because var has scope outside the block as well. So when control exits the block and comes into global scope, var a comes into direct conflict with let a. This is a case of redeclaration which let doesn't allow. That is why, we can shadow let a by function-scoping the var a.
Because var is not block scoped. It is global scoped and functional scoped where as let and const are block scoped and functional scoped. So var inside block scope is allocated in global memory and then we have let variable so we get error as it already exists.
let a =20
{
var a =30;
}
can you explain this part again.. a Lil bit confusing why it throwing an error
It is because 'let' cannot be redeclared within its scope. Since 'var' has a functional scope and not a block scope it will try to redeclare the 'let' variable which is not allowed.
Does shadowing occur in functions too?
notes:
let and const are block scoped. var is function scoped.
Wow I was having trouble studying this part from W3 schools.
Superb Visualization🌟
Even on my last interview which I have appeared a few weeks ago, I told the same to the interviewer about "let and const" without knowing what is the in-depth mechanism behind it. These explanations were really in need, even for person who are experienced in JS. THANK YOU AKSHAY!! 😊😍💖💖
this is one of the most important concept and trust me in interviews i have seen like 100 of questions which directly and indirectly comes from this concept.... very well explained.... thanks a lot Akshay bhaiya....
Block is set of statements in JS where Js expects a single statement.
Lexical scope (Local memory + Reference to Lexical enviroment of its parent) works same inside the block also.
let and const are block scoped and they would reside in a separate memory called block unlike var which has global scope.
Shadowing is basically overriding of the variable.
Illegal shadowing:- Shadowing of let to var and it will throw syntax error.
You are an amazing tutor. Early morning 3 and I am studying using your videos 😛. 🙂I had a doubt in Function scope of shadowing. You said it works in similar way as to block. But as per your call stack video( and when I tried it too), Function scope and block scope differs for "var" variables but works similar for let &const(which you mentioned).In function scope, only shadowing occursfor "var" and not overwriting as in normal block. Kindly let me know if I got it wrong or right
Then what is the difference between a block-scope and a functionscope? Is it just the place it is stored ?
To clarify that, you need to take a short look back and reframe, what a block and a function is.
A function is a set of actions that can be performed. It has its own execution context, and declares memory space in the global scope. Combined with a statements that are stored in a block the function can be called after wards.
A single block by itself will be stored in a memory space for blocks, when not used in functions. It is just the group of statements bundled together. When not used in functions, its mostly used with other flow conditions, that will be called if a statement is true of not.
So blocks can just be called by other statements/or conditions like loops ecetera. They do have a own "lexical scope or in that case block scope".
Thanks for my self answering my question one month later.
Thank you Akshay for another wonderful video. Your way of explaining the things is amazing.
I wish this series will never end, then only the myth of "You don't know JS" will become "I know everything in JS".
THANK YOU AKSHAY. 🙏♥️
shadowing of var is working differently in {} and function {} why ?
var b =100;
function x() {
var b=10;
console.log(b)
}
x();
console.log(b)
result : 10,100
------------------------------------------------------------
var b =100;
{
var b=10;
console.log(b)
}
console.log(b)
result : 10,10
Hi Akshay, I had a question about when we invoke functions js creates an execution context for the same,
so when we have only a block { } in js and execute the file does JS also creates an execution context for the block?
No Execution context is not created for blocks
Block: Means the code or statement written inside the bracket {}Block Scope: Means the methods of accessing declared values inside the block
e.g Var: functional scope: Only can access inside the function Let and Const: Only can access in the same block where they are declared
Shadowing: Means shadowing value inside a block of declared variables globally
e.g var a=100function a(){var a=10;console.log(a);}a()
It will print 10, coz a is accessing its nearby deaclaired value and has block sope is its shadowing a value of a declared outside of function
Things learned:
1. Code inside curly bracket is called block Or Compound Statement.
For Ex: {
console.log("Curly Bracket");
}
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.
For Ex: var a = 5;
function takeIt( ){
var a = 20;
console.log(a);
}
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 stored in global memory and hence can be accessed outside block as well whereas same is not the case with let and const.
8. If we created same name variabel outside function so it will Shadow inner one value.
inside the functions {are also a block }, it stores the variable in local memory space, but incase of if , for, while also a block it stores variable in in the block memory space, why?
Need to watch again and again until I start consuming this in real life projects.
Again an amazing video. And I request to everyone(inc. ME), to practice this shadowing concept right now to understand in-depth, otherwise, we may easily forget.
learning javascript in 2024, this series is awesome
Do we have a separate Execution Context that is created for each block?
Local
BLock
SCript
GLobal
it may helpful see the how memory was allocating.
let ag6 =9883 // allocating in the script
{
let ag1 =345 // allocating in the block
var ag4 = 9923 // allocating in the global
}
function afun(){
var ag2 =8999
let ag3 = 9232
console.log('hell')
}
afun() // allocating in the global
const bfun= ()=> {
let ag7 = 2332
const ag8 = 2232
var ag9 = 23221
{
var ag10 = 989823
let ag11 = 23423
{
var ag12 = 23423
}
}
}
bfun()
I understood well enough so that I can explain another person and your channel is very important for JavaScript developer so I have shared it to my friends
Sir I never comment on any UA-cam videos but after seeing your videos I will highly recommend others to watch your javascript playlist
The reason why we can not shadow a let with a var is because if a variable is shadowing something, it should not cross the boundary of its scope. Now, var is not block scoped, it is function scoped. Now, as it is not block scoped, it interferes with the variable outside of block and hence this error happens.
where is let and cost stored when we write the same code in nodejs?
is it the same as Script side?
I'm also having this doubt.
why does hoisting work for let and const in block but not in script
{
console.log(b);
let b = 100;
console.log(c);
const c = 1000;
} // prints undefined twice but
------------------------------------------------
console.log(b);
let b = 100;
console.log(c);
const c = 1000;
// prints Cannot access 'b' before initialization error
If only we had teachers like him in our schools and colleges. We would have our own Google and Microsoft kind of software products.
Bhaiya you told that if we have `console.log(x)` in our program then, under the hood, it's treated as `console.log(window.x)`
Then why `console.log(x)` gives ReferenceError while `console.log(window.x)` gives undefined as output.
The video content is too deep, the end tune is fantastic. ❤💕