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!
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
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.
I admire your clarity. This video shines at realistically explaining under the hood concepts. Hoisting explanation is rational and highly practical. Thanks Brad :)
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.
I'm going through some JS theory for interviews, and I have to share that this is by far the best video explanation of hoisting. Thank you, Brad! Also, just to point out that I am revising my theoretical knowledge, regardless of the fact that I have over a decade of experience, so this content is really relevant!
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.
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!
At 1:43 there are a few corrections that can be made 1) Setup memory heap for storing variables and function references. [ Function references aren't stored in the heap, the actual functions themselves are stored in the heap and references are stored in the stack memory ] 2) The scope chain is also setup here but it isn't mentioned 3) Point 2 and 3 could be merged into 1
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.
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). 👍
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).
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'
5:22 During the creation phase of the function execution context, function arguments are allocated space and initialized with their values if passed, or set to undefined if not passed. Brad says they are set to undefined which is not true, they are passed so in the creation phase they are initialized.
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
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.)
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.
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 !
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??
If function are created in create phase and added to global scoop and (let/const) are being added to a Script scoop... Where are arrow functions stored (const fct=() =>console.log("arrow"))?
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.
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)
after watching this video many questions popped in my brain: for example what's undefined in memory. how many bytes does it occupy? and when you assign that variable a value that needs to be stored using more bytes that reseved what happens? is the stack in JS in the VM or does it get copied directly to the virtual stack of the OS?
I think it is better to put [red block "temporal dead zone"] where [green block "Initialize"] is and [green block "Initialize"] where [red block "temporal dead zone"] is. Declaration and Initialization should be in creation phase and then temporal dead zone then Assignment in execution phase. Please acknowledge me if I am wrong. Thank BRAD❤
![JavaScript Under The Hood [1] - Thread & Call Stack](/img/1.gif)
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!
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.
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.
I admire your clarity. This video shines at realistically explaining under the hood concepts. Hoisting explanation is rational and highly practical. Thanks Brad :)
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.
I'm going through some JS theory for interviews, and I have to share that this is by far the best video explanation of hoisting. Thank you, Brad!
Also, just to point out that I am revising my theoretical knowledge, regardless of the fact that I have over a decade of experience, so this content is really relevant!
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.
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 was really insightful and I love that you present the "theory" and the follow up with practical examples. Beautiful! 😀
Damn good. No one has ever explained in such a good way. This makes me understand things rather than simply learning them.
Best explanation of hoisting and global/block scope I've seen. Thank you.
I agree
a lot of videos out there are talking on the same concepts, but your videos always have something new
Brad you're my favorite RUclipsr much love from Kenya.
At 1:43 there are a few corrections that can be made
1) Setup memory heap for storing variables and function references. [ Function references aren't stored in the heap, the actual functions themselves are stored in the heap and references are stored in the stack memory ]
2) The scope chain is also setup here but it isn't mentioned
3) Point 2 and 3 could be merged into 1
bro you made hoisting so much clear.. it really blew my mind
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.
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!
This is by far the best clarification on 'Hoisting ' thanks for making it really easy to understand
Simply incredible! Very well taught and paced videos. Congratulations, Brad!
Because of this man and his channel i learned js and react.js and now I got a job with DOD ICE
Brilliant explanation. Probably the best and most concise videos on the topic I've seen.
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.
wow - first time I've seen a conceptual explanation that integrates scope and hoisting. kudos!
I'm really digging these JS Under the hood vids. Great Work!
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). 👍
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).
After this series, nodejs, under the hood please. What is single thread non-blocking async system etc.
++
Wow!! This really put things into perspective, regarding Hoisting, for me. Loved the video! Thanks Brad!!
Short, detailed and well delivered.
All your videos, especially your explanation is amazing! Thank you for this channel!
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'
5:22
During the creation phase of the function execution context, function arguments are allocated space and initialized with their values if passed, or set to undefined if not passed. Brad says they are set to undefined which is not true, they are passed so in the creation phase they are initialized.
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
Man this really made hoisting feel less like its some black magic that js does. Thanks a lot!
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 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
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 for the technical look at hoisting. Now it actually makes sense
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.
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 !
really good explanation, finally understood what was behind hoisting!
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??
Amazing series of videos. Best what I have seen!
This video really helped me a lot, lots of love from India ❤
As usual, your videos are super helpful and clear. Thank you so much!
wow, learned a new thing in a very easy yet detailed manner. Thanks!
Great stuff Brad, very much appreciated. Very insightful.
If function are created in create phase and added to global scoop and (let/const) are being added to a Script scoop... Where are arrow functions stored (const fct=() =>console.log("arrow"))?
You're a genius man, thanks for explaining in details.
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.
This should be in a playlist
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)
Brad, Thank you for putting out videos for us. I have learned so much and use some of your templates too.
Thanks a bunch!🙂🙋🏻♀️
Truly amazing. Your ability to teach.
This feels almost illegal to know, so good! Would you suggest a few books for learning advanced JS concepts?
Simple and clear. Thank you!
Thank you, under the hood is so interesting !And Well explained ❤
Thank you so much it clears a lot of concept. Will be waiting for your more videos like this.
Very elegant explanation, thank you!
Clear and just amazing. Thank you brad.
I understand it directly , very good explanation
fantastic as usual 👏🏻👏🏻👏🏻 many thanks Brad
These videos are great! Please keep it up
this a grate video! Tks from Brazil man!
Just WoW, I don't have any other words🙌🏼
Great explanation - thank you very much for the nuance of the topic as well!
One like is not enough for this video. Thanks!
out of the box🔥 very impressive 👍👍
Wow these area great clarifying episodes. Thank you so much!
Perfect explanation Brad 🙏 thanks mate
I always declare functions above because I was learning programming on "basic" and "pascal")
P.S. This lessons very cool!
This is a really promising series.
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 dont know how ya do it Trav but ya do it..thanks for the video!
Good thing I subscribed to you.
Already picking the fruits of that decision. 👍
Love this series keep it up...
This was super helpful!! Thank you!!
after watching this video many questions popped in my brain:
for example what's undefined in memory. how many bytes does it occupy?
and when you assign that variable a value that needs to be stored using more bytes that reseved what happens?
is the stack in JS in the VM or does it get copied directly to the virtual stack of the OS?
Legendary explanation.
Thank you sir!
Please start a series on DS and Algo in Javascript
How are arrow functions treated during the creation phase, are they treated as normal functions or as variables?
Hi Brad,
Amaizing videos! Maybe closure also should be it this tutorial.
The greatest explainer
everything makes so much sense now 😭🙏🙏🙏
awesome explanation❤
thank you for the really clear explanation!
This is Insanely helpful!!! Thank you sir!
Fall-stack 🤣 You are the best!
awesome series!
This video was so useful, thank you
Really well explained!
super good deep knowledges! did you read it from books? if yes which was it?
Wow made execution context clearer
Can you provide the reference where i can read more about this stuff?
Perfect explanation
cool, I can't wait to next ep
God bless you Brad
I think it is better to put [red block "temporal dead zone"] where [green block "Initialize"] is and [green block "Initialize"] where [red block "temporal dead zone"] is.
Declaration and Initialization should be in creation phase and then temporal dead zone then Assignment in execution phase.
Please acknowledge me if I am wrong.
Thank BRAD❤