JavaScript Under The Hood [2] - Execution Context
HTML-код
- Опубликовано: 2 авг 2024
- In this video, we will talk about execution context and hoisting
💻 My Courses & More
traversymedia.com
💖 Show Support
Patreon: / traversymedia
PayPal: paypal.me/traversymedia
👇 Follow Me On Social Media:
Twitter: / traversymedia
Instagram: / traversymedia
Linkedin: / bradtraversy
Timestamps
0:00 - Intro
0:44 - What Is Execution Context?
1:39 - The 2 Phases
3:32 - Step By Step Examination
6:12 - Examine Creation In Browser
7:32 - Step-Through Execution
8:52 - Hoisting
11:26 - var vs let & const 
Наука
Wow, that made hoisting so much clearer to me! I had on my mind the "moved-to-the-top" concept, but this makes much more sense. Great series Brad! Thank you for everything!
Same for me! It blew my mind 🤯
Came here to write the same thing
same same for me all these years, wow!
I can’t express how much important it is to look at the call stack when debugging.
P.S: Need more of such under the hood videos.
This is one of the most important topics I didn't care to understand when I first started learning to code... Today It's what I am learning. Thank you, Brad
"...one of the most important topics I didn't care to understand when I first started..."
Exactly my thought, too.
These "Under The Hood" videos are great! The way you go about explaining how they work is tremendously helpful. Thank you!
This series is one of the best series I’ve ever watched, I wish you could make a full series of JS under the hood not just a few parts, thanks for your hard work and dedication Brad.
WOW!!!!! Can't express how glad I am you're doing this series. I love it so much. I'm learning NodeJS and trust me when I say the concepts are essential and I've looking for something like this. Not necessarily how to code, but under-the-hood concepts give you a better understanding of your code. I could keep re-watching these videos over and over again. Looking forward to more of these. Thanks, man! You're the best! Keep it coming!
this series, takes me back to when I was watching your videos, to understand array methods, and the basics of Js. Often it happens to leave out the theory and go directly to practice.
I admire your clarity. This video shines at realistically explaining under the hood concepts. Hoisting explanation is rational and highly practical. Thanks Brad :)
This was really insightful and I love that you present the "theory" and the follow up with practical examples. Beautiful! 😀
I was doing another course and this part had me stuck. You really helped me understand this quickly. I appreciate what you do giving out content like this for free.
This is the best series I’ve ever watched.
Diagrams are effectively used to back up explanation and make it so easy to understand.
Thank you so much for making this content.
It is important to mention that local variables are not stored in the Memory Heap but are rather stored in the Call Stack. It is inefficient to store local variables of functions in the Memory Heap since they are not accessed outside the function scope. Storing local variables in the Call Stack and "forgetting" about it once the execution context of the function is popped is how modern JS engines go about it. Great video!
Great start to the series! I hope you plan to go under the hood with closures; this feels like the perfect series for that. Great refresher for me (and you taught me about let/const are actually hoisted locally). 👍
Best explanation of hoisting and global/block scope I've seen. Thank you.
I agree
It's a really great series. You explained the information and topics that you can't find in most places, with great examples. It's really useful.
a lot of videos out there are talking on the same concepts, but your videos always have something new
This is by far the best clarification on 'Hoisting ' thanks for making it really easy to understand
Damn good. No one has ever explained in such a good way. This makes me understand things rather than simply learning them.
After this series, nodejs, under the hood please. What is single thread non-blocking async system etc.
++
I'm really digging these JS Under the hood vids. Great Work!
Simply incredible! Very well taught and paced videos. Congratulations, Brad!
Brad you're my favorite RUclipsr much love from Kenya.
Thank you so much for the content. This is not a simple concept to explain but you did it so well that I was able to understand it like it was easy
Great video, Brad; I still learnt something new, even though I thought I knew this topic already. Also, I love that you made use of the browser to drive the explanation home
Brad, Thank you for putting out videos for us. I have learned so much and use some of your templates too.
Thanks a bunch!🙂🙋🏻♀️
Short, detailed and well delivered.
bro you made hoisting so much clear.. it really blew my mind
In the midst of the video I was dead set on asking why you were using var instead of let/const, I'm glad you've explained it. Thanks for the video, it gives much insight into what's going on when a D3 viz is produced (that's just what I'm dealing with on a daily basis, so my natural point of reference).
Brilliant explanation. Probably the best and most concise videos on the topic I've seen.
Wow!! This really put things into perspective, regarding Hoisting, for me. Loved the video! Thanks Brad!!
Thank you for the technical look at hoisting. Now it actually makes sense
wow - first time I've seen a conceptual explanation that integrates scope and hoisting. kudos!
As usual, your videos are super helpful and clear. Thank you so much!
Thank you so much !
In my view the best practice of JavaScript about using hoisting goes through coding with strict mode(never use a function or a variable before its initialization). which is logic & makes your code more readable.
I encounter this whenever I'm using for example the arrow functions while declaring it as 'const'
Amazing series of videos. Best what I have seen!
This video really helped me a lot, lots of love from India ❤
Really super explanation, Brad. (And I finally got an intro into using the Sources tab of Chrome Dev Tools, which is a real plus.)
I noted, BTW, that when I wrote getSum() as an arrow function -- instead of as a 'regular' function -- it didn't appear in the Global object; instead, it was in a Script object immediately above Global (and eventually below Local). I haven't dug into that yet, but seems like something else that's important to learn.
(EDIT: And no surprise that Brad cleared this up in the final section.)
Thank you so much it clears a lot of concept. Will be waiting for your more videos like this.
Even though I know what JS code does, I always wanted to know what is actually going on under the hood. Great content!
Thank you, under the hood is so interesting !And Well explained ❤
Man this really made hoisting feel less like its some black magic that js does. Thanks a lot!
Because of this man and his channel i learned js and react.js and now I got a job with DOD ICE
Hey Brad...been following along with you for a couple years now since I started coding. I'd be lost without your tutorials. Thanks for all your hard work. More Laravel TALL stack videos if you are looking for suggestions.
These videos are great! Please keep it up
Clear and just amazing. Thank you brad.
really good explanation, finally understood what was behind hoisting!
Great stuff Brad, very much appreciated. Very insightful.
Great explanation - thank you very much for the nuance of the topic as well!
You're a genius man, thanks for explaining in details.
everything makes so much sense now 😭🙏🙏🙏
fantastic as usual 👏🏻👏🏻👏🏻 many thanks Brad
Very elegant explanation, thank you!
I've fallin into the JS engine, Runtime, BrowserWebAPI/nodejsC++API, Eventloop, Call Stack, Microtask-, Macrotask-, Task-, Job-Queue Rabbithole. This Under the Hood videos really help to join some dots together. Thanks Mate & Kind regards !
This should be in a playlist
Simple and clear. Thank you!
Love this series keep it up...
I understand it directly , very good explanation
Wow these area great clarifying episodes. Thank you so much!
cool, I can't wait to next ep
Great series!
Truly amazing. Your ability to teach.
Really well explained!
Thanks a lot Brad!
One of the best, thx!
thank you for the really clear explanation!
out of the box🔥 very impressive 👍👍
Perfect explanation Brad 🙏 thanks mate
awesome series!
This was super helpful!! Thank you!!
Good thing I subscribed to you.
Already picking the fruits of that decision. 👍
Just WoW, I don't have any other words🙌🏼
This video was so useful, thank you
This is Insanely helpful!!! Thank you sir!
I dont know how ya do it Trav but ya do it..thanks for the video!
this a grate video! Tks from Brazil man!
Legendary explanation.
Thank you, this is awesome!
Really helped. Thank you.
amazing explanation
Learning a lot from you. thank you 🙏🏻
Great content!
Dope video. Thanks man
Love the content brad thanks love to see more of this kind of stuff would it be possible to touch upon computer science topics as-well?
I really liked this!!
awesome explanation❤
Thanks you so much for this tutorial, i have learned new thinks .
Amazing!!
One like is not enough for this video. Thanks!
Wow this is amazing.
Amazing!
The greatest explainer
This is a really promising series.
God bless you Brad
Thank you!!
Great video
Dear Brad, you have already made me a JS addict and I'm not sure what'll will happen to me after this series.
Kindly request you to post a video on illustrating the execution of asynchronous functions in JS event loop may with a 'setTimeout' or any other callback function. Doesn't matter how well I know the stuff, I always learn a new thing or correct some of the misunderstandings I have, each time I follow a video of yours (E.g:- Hoisting of 'let' & 'const' variables)
Hoisting can be quite useful when laying out react components. Say you have a ListComponent written as a functional component and then you can write the component items rendered in the list just below and don't worry about the order.
Amazing❤️
Cool vid!
very very usefull content , please make more such videos thank you so much.😍💡