JavaScript Under The Hood [2] - Execution Context

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

[@DesignfulDev]

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!

[@giulianocrivelli9272]

Same for me! It blew my mind 🤯

[@Azrael1793]

Came here to write the same thing

[@Kco86]

same same for me all these years, wow!

[@johnyepthomi892]

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.

[@deejaydev]

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

[@nickstaresinic9933]

"...one of the most important topics I didn't care to understand when I first started..." Exactly my thought, too.

[@universecode1101]

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.

[@Sloth740]

These "Under The Hood" videos are great! The way you go about explaining how they work is tremendously helpful. Thank you!

[@pranjalsrivastava1191]

Damn good. No one has ever explained in such a good way. This makes me understand things rather than simply learning them.

[@saman6199]

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.

[@davidfrank-oziwo9836]

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!

[@andresndergaard1712]

This was really insightful and I love that you present the "theory" and the follow up with practical examples. Beautiful! 😀

[@israilkarud9293]

I admire your clarity. This video shines at realistically explaining under the hood concepts. Hoisting explanation is rational and highly practical. Thanks Brad :)

[@hnaqvi719]

Because of this man and his channel i learned js and react.js and now I got a job with DOD ICE

[@knockedgoose4206]

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.

[@alextonev4145]

Man this really made hoisting feel less like its some black magic that js does. Thanks a lot!

[@berkaygurcan141]

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.

[@DaveCollison]

Best explanation of hoisting and global/block scope I've seen. Thank you.

[@YoBarbados]

I agree

[@matt_fonto]

Simply incredible! Very well taught and paced videos. Congratulations, Brad!

[@MgelikaXevi]

really good explanation, finally understood what was behind hoisting!

[@moustafamahmoud4948]

a lot of videos out there are talking on the same concepts, but your videos always have something new

[@maihu2464]

bro you made hoisting so much clear.. it really blew my mind

[@choppinbrixx4931]

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). 👍

[@archiem6323]

Brad, Thank you for putting out videos for us. I have learned so much and use some of your templates too. Thanks a bunch!🙂🙋🏻‍♀️

[@mapbrainnovationsofficial5813]

This is by far the best clarification on 'Hoisting ' thanks for making it really easy to understand

[@gregmohr6135]

I'm really digging these JS Under the hood vids. Great Work!

[@TheDoubleMvp]

Brilliant explanation. Probably the best and most concise videos on the topic I've seen.

[@favouritejome]

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

[@RockstahRolln]

Wow!! This really put things into perspective, regarding Hoisting, for me. Loved the video! Thanks Brad!!

[@ebcoutinho]

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

[@simpleWebDev]

This video is SO GOOD at explaining this stuff, thanks for it!

[@taofeeqomotolani2311]

Short, detailed and well delivered.

[@anag2125]

As usual, your videos are super helpful and clear. Thank you so much!

[@SynTronic.]

Fall-stack 🤣 You are the best!

[@imtanuki4106]

wow - first time I've seen a conceptual explanation that integrates scope and hoisting. kudos!

[@mayankk2800]

Legendary explanation.

[@yaroslavbukhta6562]

Thank you for the technical look at hoisting. Now it actually makes sense

[@rashedinislam4668]

You're a genius man, thanks for explaining in details.

[@programer9620]

Thank you so much it clears a lot of concept. Will be waiting for your more videos like this.

[@vladimirpaziuk4707]

Amazing series of videos. Best what I have seen!

[@kisangali8184]

Brad you're my favorite KZbinr much love from Kenya.

[@bshwin]

Great stuff Brad, very much appreciated. Very insightful.

[@albertkipchirchir5799]

Clear and just amazing. Thank you brad.

[@YoBarbados]

Great explanation - thank you very much for the nuance of the topic as well!

[@rougegorge3192]

Thank you, under the hood is so interesting !And Well explained ❤

[@kleczekr]

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).

[@burakkepuc]

After this series, nodejs, under the hood please. What is single thread non-blocking async system etc.

[@harshmalviya4831]

++

[@maximganiev4048]

fantastic as usual 👏🏻👏🏻👏🏻 many thanks Brad

[@LeCyProductions]

Wow these area great clarifying episodes. Thank you so much!

[@CC-ij3ky]

Perfect explanation Brad 🙏 thanks mate

[@HuskyHuskell]

Very elegant explanation, thank you!

[@vahidseyidov]

Just WoW, I don't have any other words🙌🏼

[@markbarlescu1853]

Truly amazing. Your ability to teach.

[@hassaneoutouaya]

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'

[@lifeisbeautifu1]

Simple and clear. Thank you!

[@toanlam8603]

These videos are great! Please keep it up

[@nickstaresinic9933]

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.)

[@thucle4122]

thank you for the really clear explanation!

[@Ratchet2022]

This is Insanely helpful!!! Thank you sir!

[@ktoscos4546]

I understand it directly , very good explanation

[@alemayehuewunetu9998]

This should be in a playlist

[@markoradonjic7]

Even though I know what JS code does, I always wanted to know what is actually going on under the hood. Great content!

[@nishitagiduturi1270]

Hello Brad, var variable lifecycle vs let variable lifecycle chart at 13:38, is not clear and conflicting to previous slide browser example where in creation phase itself let variable x is stored with undefined value, in block scope. Can you please clarify on this one??

[@swancompany_inc]

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.

[@oilybrakes]

Good thing I subscribed to you. Already picking the fruits of that decision. 👍

[@ridir2912]

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 !

[@yusufjamal269]

out of the box🔥 very impressive 👍👍

[@TyRector]

This was super helpful!! Thank you!!

[@tjay5644]

Love this series keep it up...

[@Mr.Robots]

this a grate video! Tks from Brazil man!

[@geekstudio.]

I dont know how ya do it Trav but ya do it..thanks for the video!

[@Darkgx5]

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?

[@savannahtechstack8463]

This video was so useful, thank you

[@ulrichmbouna4091]

Thanks you so much for this tutorial, i have learned new thinks .

[@amingrateful7661]

Learning a lot from you. thank you 🙏🏻

[@rikilamadrid]

Great series!

[@newbiedb]

Great video

[@MsKodus]

Really well explained!

[@Nahuel_Uboldi]

awesome series!

[@k.ksharma4457]

awesome explanation❤

[@ahmatarnal1018]

amazing explanation

[@bevedel]

Really helped. Thank you.

[@AsToNlele]

Thanks a lot Brad!

[@Krazness]

Dope video. Thanks man

[@TheKomaras]

Thank you, this is awesome!

[@seddeknadhem5638]

One of the best, thx!

[@hoseinabolhasani]

very very usefull content , please make more such videos thank you so much.😍💡

[@FaisalAmin001]

Thank you sir! Please start a series on DS and Algo in Javascript

[@m.h.wasimelahi3878]

Since it is clear that hoisting can be done with let and const also, so plz do make a video on hoisting with let

[@heat1486]

Great content!

[@pawelandrys]

thanks, greate video

[@aristidescruz1414]

I really liked this!!

[@JeanDidier]

God bless you Brad

[@UniParse]

cool, I can't wait to next ep

[@Norfeldt]

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.

[@andriiauziak1178]

Hi Brad, Amaizing videos! Maybe closure also should be it this tutorial.

[@mgabitov]

One like is not enough for this video. Thanks!

[@vlr9999]

I always declare functions above because I was learning programming on "basic" and "pascal") P.S. This lessons very cool!

[@arvindk9268]

Wow this is amazing.

[@sureiyyakarnain4324]

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)

[@tanzimchowdhury320]

This feels almost illegal to know, so good! Would you suggest a few books for learning advanced JS concepts?

[@beckychan5792]

Thank you!!

[@willadams6217]

This is a really promising series.