JavaScript Visualized - Execution Contexts
Vložit
- čas přidán 22. 05. 2024
- Learn how JavaScript handles code execution through execution contexts and environment records, including features like hoisting, the scope chain, and closures!
- / lydiahallie
- buymeacoffee.com/lydiahallie
- / lydiahallie
- / lydia-hallie
- / theavocoder
Timestamps:
0:00 Intro
0:15 Execution Context Overview
1:26 Realm
1:51 Intrinsics
2:03 Global Object
2:50 Global Execution Context
4:34 Script Walk-through
9:00 Hoisting
10:14 Scope Chain
10:31 Closures
11:18 Outro
💡 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?
Now you've suddenly become my favorite tech CZcams channel.
Thank you very much for this amazing video
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 😂
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!
This is hands down the best explanation on the Internet ❤
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.
@@theavocoder What are using to put together the actually visuals/graphics?
Great and simplified explanation of the execution context and the environment record in Javascript. Thank you for the great Lydia
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!
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!
You are the best, thank you for providing specification-specific and not 'Romantic' info.
You have been addressing all the topics that I was in doubt about! Bless you.
I just think about the effort you are in these things, the design, the animation just ♥️ it.
Lydia, you're a really good tutor. Appreciate for all your amazing works!
Lydia, I truly adore you and the topics you discuss. I've learned so much from you. Thank you immensely ♥♥♥
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.
Thank you from someone that needs to understand something in and out before moving forward to the next thing .
You have an awesome teaching and presentation skill. Love your content.
glad to see a new one was uploaded.. as usual lovely presentation
I’m loving the content and the visualisations. The teaching method is very helpful. Can’t wait to see more in the future ❤❤
Love your videos! You explain so well and the visuals helps a lot! ❤
This visualization is amazing ! Great video and explanation 😊
As everyone already said, your illustrations are so good, I've recently had to debug a promise and I had your EventLoop illustration engraved in my mind which helped a lot thanks!
This channel is amazing. Thanks for your detailed explanation. 🙌
Amazing, you're a very gifted explainer
Great video. Really good explanation and those animations really make everything easy to understand. 👍
Nice content Lydia, you're killing it!!
I watched the doc on you long time ago , and I followed your path on becoming an engineer , now I’m 2 years in and loving it 😁
Gracias Lydia ❤ por tus enseñanzas he aprendido mucho, saludos desde Colombia
Your explanation is very good and deep dive also I have never found someone who explains like this.
Awesome. Proper details animation, hard work thanks alot for sharing such a valuable content
Your github repo is very useful for JS output based questions. Keep posting such videos on JS!
Finally some decent js content that goes a little deeper. Excellent video
I kind of want you to explain all the super low level things- these are so good!
Damn! What a great explanation! I thought I was senior fullstack developer until I saw this video and understood how much I did not knew
creo que soy una persona que aprende mucho mejor cuando ve los conceptos o una representacion grafica y valoro mucho tu contendio gran trabajo. Estare esperando los proximos videos de hosting, scope... gracias
I am a person who learns a lot when I see the graphical representation of the concepts. great job!!!!! I look forward to the next videos on hosting, scope....
Thanks
You have visualized it in the best way possible and even having written quite a lot of js, it became overwhelming for me. Therefore the takeaway from this is that It does what it does, despite the need to know, how it does it. It also leaves me wanting to use Keynote like you have. Thanks so much.
She IS BACK ! No way!!! hahaha Thank you so much!!
Great stuff.. nicely explained.
Thank you so much .😊
Keep up the good work 👍👍👍
The best way of explanation on youtube
I have learned so much from your channel. You're doing god's work. Look forward to more!
Thanks, I sent this video to all my colleagues
One of the waited video. U are back
Truly great video ♥ made my day.
Passive learning by having your videos on my second monitor 😁
You are on another level... Waiting for more videos...
No one can keep up with this work, keep going ❤
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.
omg thanks a lot , literally you are my sunshine
So deep, so simple just feel like a wow! 😮❤
I love your videos. I hear from people almost daily that call themselves JavaScript developers, yet the first thing they do when starting a project is reach for a framework. I've questioned some of them on JS mechanics and they really don't have a clue outside of the context of the framework they use.
JavaScript is awesome and should be taught in schools, at a fundamental level: web APIs, components, integrations (native and external). We don't need no stinking frameworks! ;0) Thanks.
you are the best Lydia 🤩
yes, I was waiting a new video!
bruh wtf, why is this so good ?❤
the explanation is also so good ❤
great tutorial, i learn so much😘
Great content ! Woud love a video about the cargabe collector from you !
Great stuff, thanks!
@10:11, line 1 should be console.log(sum(1, 2)). I am subscribing to your channel. These explanations are great.
JavaScript에서 가장 중요한 것이 Execution Context라고 들었습니다. 영상 잘 보겠습니다!
Just 30 seconds into video and it is lit 🔥
I will need to watch a couple more times to fully understand this one lol. But great video as always, love the visual animations
Appreciate all the hardwork you put in the videos
Hard to understand at first but very clearly after that.
These kind of concepts are too hard to understand in texts.
Thank you for provide visualization for hard concepts.
super amazing! thank you
Nice explanation ❤
This is amazingly well done. Something I'd love to see would be how to view some of this stuff ourselves.
E.g. parse through the call stack in Chrome dev tools.
Kendrick Lamar, Frank Ocean and Lydia Haillie are on my watchlist - great work here!
Finally The wait is over 💖💖💖💖
Waited long time for your video. I would really really appreciate if would add more use cases for this video.
amazing video! i just became a subscriber
I would love to understand everything you beautifully explained 😅😍
Nice work
Great, love it
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
Yes, new video!!!
Thank you
Another amazing tutorial from amazing tutor. Can you please tell what tool do you use Lydia to create animations / presentation?
Thank you!
I just wanna know where does she pull all this knowledge from :O This series of videos is so good :D
awesome!!!🙏
A definition of how I like how good her voice is but how complicated the demonstration is
This is really deep stuff
Liked before watching.
Great content. Subscribed hopefully you can make more videos :D
Thanks
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 wonder how you create those videos! They are wonderful!
What is the tool you're using for editing/animations?
Amazingly done 👏🏼👏🏼
Plz upload more frequently plz 🙏
for those of us that are visual. Your content is incredible. I hope to see more. ty
Just keep going! ❤
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'm in love now
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.
automatic like, thanks
Make a video of how you make your slides. Awesome!
And you deduced all of this from the ECMAScript specs?
For all the hate JS gets, its a surprisingly powerful, expressive and elegant language, as I think this talk demonstrates very well.
Visual part of video is impressive, I'm waiting for a new topics
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?