💡 Execution Contexts and Environment Records may not be the most exciting, but I wanted to have an overview video out there so I can reference back to it when I talk more about hoisting, scope chain, generators... so many more exciting topics! I just realized I'm using some reusable code patterns for my videos now lol. Anyway, hope it's useful! 📝 ECMA spec: tc39.es/ecma262/#sec-executable-code-and-execution-contexts
Why are your videos so perfect. No crazy intro video blowing out my ear drums, no paid course in the middle, soft toned voice, consice explanations. I'm really not sure if I'm watching an Ai or a really good content creator. Please upload more!
Quality is important than quantity. Focus to make better videos not more. Of course try to make more videos but make them like this quality. I like your videos. Keep going Lydia
I dream of a world where JetBrains hire you to develop a debugger that feels like your videos. (I feel like it would have to be a paid feature to happen, no one would pull such a feat for free... unless @Linus?) Awesome video as always, visualization like this brings an understanding that is hard to fully grasp with books and daily use. Keep up the great work, I recommend you to every JS dev I know!
Great video! Always great to see these deep dives as nobody would really ever need to go that low level for their day to day job, but it is good to know, you only missed the sum call in your console.log at 10:08!
Amazing video with a perfect explanation! Keep going on and I wish to see more videos from you. Just a quick feedback, I think it will be better to have another `console.log(age)` on top of the declaring `var age = 26` in 9:53 (as well as the previous `const`/`let` example) to explain the dead zone statement about `var`s too. And, as the other guys mentioned, the `sum` function call is missing in `console.log(1, 2)` at 10:09 (the correct code is `console.log(sum(1, 2))`) Anyway, you perfectly considered the details and explained very detailed things, So it's valuable. Thank you!
Too much stuff in less time and too many animations and colors. Its like sensory overload from every point! Meed to watch it like 5 times to understand everything
I really like your videos. Can you please explain difference between these two? for(let i=0;i{ console.log(i) },100); } for (var i = 0; i < 3; i++) { setTimeout(() => { console.log(i); }, 100); } How does the choice between using let and var affect the output when using a for loop with setTimeout in JavaScript?
Really cool video. You didn't really define hoisting, so for those who also had to look it up: it is a behavior in JavaScript where variable and function declarations (but not initialization) are moved to the top of their containing scope during the compilation phase. I am still curious why "var"-s are hoisted, but not "const" and "let"? Is this for backward compatibility with really old JS?
Let me explain. Var variables are indeed hoisted, but if you try to access them before in the code where they are declared then you get undefined. The reason why const and let are not hoisted because it was introduced in ES6 so it was a great opportunity to make the language better since getting undefined instead of an error when trying to access the variable before its initialization creates confusion. Now they didnt made the var un-hoisted becuase it would break existing code that depends on this functionality.
You are the living example that THERE IS a difference between software engineer and developer. Your deep understanding of the tech, the way you can explain and visualize it, it’s astonishing. You‘re a true engineer. Kudos. And many thanks for the video.
Lydia, you and Josh W Comeau are the best educators in the world really, i have seen lots of lots of courses even most premium ones, you guys are top notch
I'm so surprised that such content exists. WHAT THE HELL, this is too good to be free. the amount of time that was invested in making this video. and the result are extremly clear and easy to understand. Thank you, PLEASE UPLOAD MORE. remarks: no freaking remarks, the voice is TOO clear, the visuals are TOO smooth and the explaination is TOO good.
Is `greet` stored in the `User properties` of the Global Object? Are `nameToGreet` and `fullName` stored in a `[[DeclarativeRecord]]` in the Function Environment Record? or is that just for the Global ER?
i'm still a little unclear on the 'Global Execution Context'. to try and clarify my confusion: does the 'LexicalEnvironment' point to the 'Global Environment Record' (GER) because it holds the '[[DeclarativeRecord]]'? similarly, does the 'VariableEnvironment' point to the GER because it holds 'Global Object', which in turn holds 'User properties'? does it use the 'Global Object' reference stored in '[[ObjectRecord]]' or '[[GlobalThisValue]]' (or something else)?
This absolutely top-notch of content. Great explanations plus the ideal visual diagrams. Incredible!❤ The only drawbacks for people to understand these concepts is to get focused. We're might face several problems to pay attention and not getting distracted by your holy attractiveness and harmless personality instead.😅😂 Jokes aside, with this type of content and these deep concepts of JavaScript that rarely amount of people covers, this channel will GROW significantly! Keep it up🎉😊
Great video! Also liked the other 2 ones a lot, thanks! I have a question, I didn't understand the difference between the intrinsics and Global Object Spec properties, could you clarify that?
What happens when a new block is encountered(for example an if statement, a for loop, or simply a set of statements inside {})? How are the block scoped variables inside these blocks managed?
I’ve never imagined that there is still some room for youtube tutorials, but your work is truly exceptional and stands out from the rest. I came from the instagram page, and even though I know all of these concepts, I’ve subscribed immediately, and will recommend your channel for JavaScript developers. I’ve got a question on how you make these presentations. Do you record saying the script then making animations based on that? Or are the presentations ready prior to recording and you iterate though the slides?
It's hard to believe you made this using keynote, it's awesome! I'd watch for a video about tips and tricks (not a full tutorial) about Apple Keynote to be honest.
Hi So Good Video to Learn more about Js Thank You 😊 in Your Video at 10:09 😅 Some code is wrong in the console, you must put the sum function in the console arguments Good Luck
saludos desde colombia hermosa, me encanta como explicas el funcionamiento de estas arquitecturas, me gustaria que hicieras un video explicando como funcionan los for while y do while , muchas gracias por ensenharnos.
I am using react for an enterprise stock trading. We have several socket connection and a lot of love data. The cpu usage is high. I would be appreciated if you create a practical video about improvement react projecta at enterprise level.
Great video and explanation! A question: does the compilation phase still occur for the internal code of a function, even if that function is not invoked or called during the execution phase?
Awesome content! Just want to know whether in case of function execution context, the variable environment points to different environment record than that of lexical environment or same as in case of global execution context?
wow, this one was hard to get through. Not the most fun topic in the world, but i can see how it can save a lot of time and perspective later down the line.
@Lydia - Extremenly useful. Question: on the last code example, by the time you execute getFullName(), the outer() Function Execution Context is no longer in the callstack, but outer() environment record still exist where and how? Are the outer() Function Execution Context and the outer() environment record two separate things? For how long does the outer environment record and the global environment record exist and where?
@Lydia - never mind, you answered my questions in this new RUclips video --> ruclips.net/video/6Ixyltr8_R0/видео.html from minute 2 and 10 seconds and onwards. Thank you!!
Before I start watching this video, could somebody tell me if the execution flow explained in this tutorial applies to the browser environments only, or both the browser and the Node?
I think this is based on ECMA specification, so *any* (ECMA-compliant) JavaScript environment applies. (all common browsers and NodeJS are conformant.)
You're a boon to us (JS folks). Thank you so much for your detailed, well explained, visually/audibly pleasing videos! Please keep creating more such videos, thanks again!
💡 Execution Contexts and Environment Records may not be the most exciting, but I wanted to have an overview video out there so I can reference back to it when I talk more about hoisting, scope chain, generators... so many more exciting topics! I just realized I'm using some reusable code patterns for my videos now lol. Anyway, hope it's useful!
📝 ECMA spec: tc39.es/ecma262/#sec-executable-code-and-execution-contexts
Execution Contexts and Environment Records ARE the most exciting ... :)
Thank you so much 🎉
I love you
@@samzhang3200 🤔🤔
@@samzhang3200 Really?
Why are your videos so perfect. No crazy intro video blowing out my ear drums, no paid course in the middle, soft toned voice, consice explanations.
I'm really not sure if I'm watching an Ai or a really good content creator. Please upload more!
because she pursuits perfection....
You're my most awaited youtuber right now, please do upload more often 🥹
Thank you!
Same bro
Same
You forget to put "async" at the start of your sentence !
I agree, but! Upload when you think your content is ready for it, that'd be much better. I still need a couple of days to understand this video only 😂
And you deduced all of this from the ECMAScript specs?
Quality is important than quantity. Focus to make better videos not more. Of course try to make more videos but make them like this quality. I like your videos. Keep going Lydia
Thank you, very nice explanation.
There is a small mistake at 10:09, it should be:
console.log(sum(1,2));
instead of:
consol.log(1,2);
I dream of a world where JetBrains hire you to develop a debugger that feels like your videos. (I feel like it would have to be a paid feature to happen, no one would pull such a feat for free... unless @Linus?)
Awesome video as always, visualization like this brings an understanding that is hard to fully grasp with books and daily use. Keep up the great work, I recommend you to every JS dev I know!
@10:11, line 1 should be console.log(sum(1, 2)). I am subscribing to your channel. These explanations are great.
Great video! Always great to see these deep dives as nobody would really ever need to go that low level for their day to day job, but it is good to know, you only missed the sum call in your console.log at 10:08!
Wow. I mean absolutely no disrespect at all, but my goodness you are beautiful.
Amazing video with a perfect explanation! Keep going on and I wish to see more videos from you.
Just a quick feedback, I think it will be better to have another `console.log(age)` on top of the declaring `var age = 26` in 9:53 (as well as the previous `const`/`let` example) to explain the dead zone statement about `var`s too.
And, as the other guys mentioned, the `sum` function call is missing in `console.log(1, 2)` at 10:09 (the correct code is `console.log(sum(1, 2))`)
Anyway, you perfectly considered the details and explained very detailed things, So it's valuable. Thank you!
I've never seen any person who could speak about JS for so long with smile.
This is too complex , looking for a much more simpler & high level explanation , you went too deep (that what she.....!)
Too much stuff in less time and too many animations and colors. Its like sensory overload from every point! Meed to watch it like 5 times to understand everything
I really like your videos. Can you please explain difference between these two?
for(let i=0;i{
console.log(i)
},100);
}
for (var i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i);
}, 100);
}
How does the choice between using let and var affect the output when using a for loop with setTimeout in JavaScript?
Really cool video. You didn't really define hoisting, so for those who also had to look it up: it is a behavior in JavaScript where variable and function declarations (but not initialization) are moved to the top of their containing scope during the compilation phase. I am still curious why "var"-s are hoisted, but not "const" and "let"? Is this for backward compatibility with really old JS?
Let me explain.
Var variables are indeed hoisted, but if you try to access them before in the code where they are declared then you get undefined. The reason why const and let are not hoisted because it was introduced in ES6 so it was a great opportunity to make the language better since getting undefined instead of an error when trying to access the variable before its initialization creates confusion. Now they didnt made the var un-hoisted becuase it would break existing code that depends on this functionality.
PLEASE MAKE SEVERAL HUNDRED MORE VIDEOS LIKE THIS. THIS IS AMAZING.
You are the living example that THERE IS a difference between software engineer and developer.
Your deep understanding of the tech, the way you can explain and visualize it, it’s astonishing. You‘re a true engineer.
Kudos. And many thanks for the video.
You are the best, thank you for providing specification-specific and not 'Romantic' info.
Keep up the good work Lydia! It's crazy how these types of tutorial at this quality were only available as paid lessons. I wish you the best!
@theavocoder at 10:08 there should have been the sum() function call.
Is it only me that felt overwhelmed or you do the same?
Seemed so complicated
Now you've suddenly become my favorite tech RUclips channel.
Thank you very much for this amazing video
Those animations! As someone getting started with motion design I have to commend the effort that goes into these videos.
Thank you! Keynote + Magic Move goes a long away haha
@@theavocoder thanks for this! I'm amazed that Keynote could produce that smoothness.
Lydia, you and Josh W Comeau are the best educators in the world really, i have seen lots of lots of courses even most premium ones, you guys are top notch
I'm so surprised that such content exists. WHAT THE HELL, this is too good to be free.
the amount of time that was invested in making this video. and the result are extremly clear and easy to understand. Thank you, PLEASE UPLOAD MORE.
remarks: no freaking remarks, the voice is TOO clear, the visuals are TOO smooth and the explaination is TOO good.
can u create the react rendering process behind the scene visualization🙃
I am curious, how do you do these visuals? They look really great.
This is hands down the best explanation on the Internet ❤
Thank you from someone that needs to understand something in and out before moving forward to the next thing .
Is `greet` stored in the `User properties` of the Global Object?
Are `nameToGreet` and `fullName` stored in a `[[DeclarativeRecord]]` in the Function Environment Record? or is that just for the Global ER?
i'm still a little unclear on the 'Global Execution Context'. to try and clarify my confusion:
does the 'LexicalEnvironment' point to the 'Global Environment Record' (GER) because it holds the '[[DeclarativeRecord]]'?
similarly, does the 'VariableEnvironment' point to the GER because it holds 'Global Object', which in turn holds 'User properties'? does it use the 'Global Object' reference stored in '[[ObjectRecord]]' or '[[GlobalThisValue]]' (or something else)?
The best way to understand how javascript works. Also covering hoisting, the scope chain, closures
kuch samajh nhi aya but sunke acha lga!
This absolutely top-notch of content. Great explanations plus the ideal visual diagrams. Incredible!❤
The only drawbacks for people to understand these concepts is to get focused. We're might face several problems to pay attention and not getting distracted by your holy attractiveness and harmless personality instead.😅😂
Jokes aside, with this type of content and these deep concepts of JavaScript that rarely amount of people covers, this channel will GROW significantly! Keep it up🎉😊
Me in 1997: I never liked Javascript.
Me in 2024: I never liked Javascript.
Great video! Also liked the other 2 ones a lot, thanks! I have a question, I didn't understand the difference between the intrinsics and Global Object Spec properties, could you clarify that?
@theavocoder hey explanation is mind blowing with these animation. Could you please create same for Node Js inner working flow ?
What happens when a new block is encountered(for example an if statement, a for loop, or simply a set of statements inside {})? How are the block scoped variables inside these blocks managed?
Great content. Subscribed hopefully you can make more videos :D
I’ve never imagined that there is still some room for youtube tutorials, but your work is truly exceptional and stands out from the rest.
I came from the instagram page, and even though I know all of these concepts, I’ve subscribed immediately, and will recommend your channel for JavaScript developers.
I’ve got a question on how you make these presentations.
Do you record saying the script then making animations based on that? Or are the presentations ready prior to recording and you iterate though the slides?
It's hard to believe you made this using keynote, it's awesome! I'd watch for a video about tips and tricks (not a full tutorial) about Apple Keynote to be honest.
this content is seriously next level. wow. amazing, please upload more very educational.
Idk if anyone knows the line "My Lydia" from the Klaus movie 😄. Thank you Lydia🙂
Can you make video explain event loop in Node.js ?
I think thay topic very important
Thank you Lydia
Hi
So Good Video to Learn more about Js
Thank You 😊
in Your Video at 10:09 😅
Some code is wrong in the console, you must put the sum function in the console arguments
Good Luck
Hey Lydia, love your videos!
I have a small question or tip. Could you flip your face to the center or video? It would look much better!
I have learned so much from your channel. You're doing god's work. Look forward to more!
Make a video of how you make your slides. Awesome!
I would love to understand everything you beautifully explained 😅😍
saludos desde colombia hermosa, me encanta como explicas el funcionamiento de estas arquitecturas, me gustaria que hicieras un video explicando como funcionan los for while y do while , muchas gracias por ensenharnos.
I literally forgot what I learned before. Super confusing 🙄
I am using react for an enterprise stock trading. We have several socket connection and a lot of love data. The cpu usage is high. I would be appreciated if you create a practical video about improvement react projecta at enterprise level.
I'd like to see Kyle Simpson tell this lady "You dont know JS"...
Great video and explanation! A question: does the compilation phase still occur for the internal code of a function, even if that function is not invoked or called during the execution phase?
Hooo shiiiit I can't like it thousand times.
Amazing video. I'm a big fan.
Awesome and easy learn from you..
Can you create a video of how async/await runs in runtime like the one you did for Promise? Keep up the good work
Concepts explained very clearly. Could you please tell me what the animation in the video was made of?
The animation and concept is good but it's hard to understand even i already know the concept actually
amazing content, congratulations. It helps me a lot to understand JS.
Awesome content! Just want to know whether in case of function execution context, the variable environment points to different environment record than that of lexical environment or same as in case of global execution context?
Waited long time for your video. I would really really appreciate if would add more use cases for this video.
hey lydia great explanation but what the difference in callback queue and microtask queue ?
Me after watching the video: hmmm, It seems I know it all and yet It seems I know nothing about it 🙂
this is to be hardwired, i am building the visualisation of every program i write :-)
Only thing is that I fail to switch context from the smile in bottom right corner to the actual content.... (not complaining)
How did you get so good at this? What books/resources would you recommend?
Waiting for the next video!
Don't use term hoisting or hoisted, because hoisting doesn't exist in specification.
Great video! Where do you get this kind of information from? Would like to dig deeper into it :)
what about heap memory for arrays, objects and garbage collector?
Visual part of video is impressive, I'm waiting for a new topics
if let, const variable is uninitialized during the creation phase, then why do we get a reference error rather than cannot access ?
Could you please show arrow functions in relation to environment records ?
wow, this one was hard to get through. Not the most fun topic in the world, but i can see how it can save a lot of time and perspective later down the line.
Can you create a series for totally new js dev ! this is seems a little bit huge, thank you
You are both smart and beautiful. Hope you are humble as well in real life!
Next topic - webworkers and parallelism
@Lydia - Extremenly useful. Question: on the last code example, by the time you execute getFullName(), the outer() Function Execution Context is no longer in the callstack, but outer() environment record still exist where and how? Are the outer() Function Execution Context and the outer() environment record two separate things? For how long does the outer environment record and the global environment record exist and where?
@Lydia - never mind, you answered my questions in this new RUclips video --> ruclips.net/video/6Ixyltr8_R0/видео.html from minute 2 and 10 seconds and onwards. Thank you!!
How to create the animation in your tutorial ? It's amazing.
Some parts of the slides in the video are covered by your face screen section.
why didnt i understood a single thing am i just that dumb ?
Your videos help so much! Thank you!
You re amazing❤ pls next video about _proto_ , prototype and everything what belongs to it 🥹❤️❤️❤️❤️❤️❤️❤️
I wonder how you create those videos! They are wonderful!
please make a video for explaining prototype and __proto__
When are you and Fireship going to do a cross collab?
Liked before watching.
How do you create these nice animated illustrations?
JavaScript에서 가장 중요한 것이 Execution Context라고 들었습니다. 영상 잘 보겠습니다!
Before I start watching this video, could somebody tell me if the execution flow explained in this tutorial applies to the browser environments only, or both the browser and the Node?
I think this is based on ECMA specification, so *any* (ECMA-compliant) JavaScript environment applies. (all common browsers and NodeJS are conformant.)
How did you make this animation? Can you tell me?
amazing video! i just became a subscriber
What tools did you use for visualization?
You're a boon to us (JS folks).
Thank you so much for your detailed, well explained, visually/audibly pleasing videos!
Please keep creating more such videos, thanks again!
Are you doing all these animations in keynote?
You got another subscriber here! Hope to see more content soon!
Plz upload more frequently plz 🙏
Where did you learn all this stuff??