💡Understanding how functions interact with their surrounding lexical environment is very important when working with JavaScript, and it's really not as mysterious as it might seem at times haha. I hope this video was useful, visualizing the detailed inner workings of tools I'm working with always helps me understand concepts better. I only use Apple Keynote to create the visualizations! Implementation details might differ, this is just based on the ECMA spec. Different engines may implement smarter garbage collection strategies that mitigate issues related to retaining large scopes in closures (e.g. the fetchAllUsers example).
As a fellow software engineer, I just wanted to say how much I appreciate your videos. They're incredibly well-done, and I only wish I had access to content like this when I was first learning these concepts. Being a visual learner, I used to draw out each concept to fully grasp them. Now, I recommend your videos to the junior devs and interns on my team-they've found them incredibly helpful. If possible, it would be amazing to see a 'JavaScript Visualized - Data Structures and Algorithms' series on your channel. I’ve been reading *Grokking Algorithms: An Illustrated Guide for Programmers and Other Curious People* by Aditya Bhargava, and I couldn’t help but think how amazing it would be to see those concepts brought to life in your visual style. Keep up the great work!
1. Javascript data structures and algorithms by Sammie Bae, 2. Data structures and algorithms with Javascript by Michael Mcmillan are also good. I would love to see a visualized explanation.
Wonderful video as always! I didn't realize closures hold a reference to the entire environment record: I hoped they were a bit smarter and only held references to the variables they actually used, allowing the GC to free the rest. Good to know!
Thank you! 🙏Just to get back to this - it actually depends on the implementation though; I cover the spec, but engines can use internal optimizations to eliminate "dead" variables even in such cases. V8/Chromium does this really well so in that case the issue with `fetchAllUsers` may not actually be an issue, but it's good to realize that that's not necessarily the default in all cases 😃
Thank you for creating such a clear and informative video, Lydia Hallie! I would definitely recommend this video to anyone who wants to learn more about closures.
closure is just 2 pointer dereference, every closure variables is translated to these two instructions mov rax, [closure + [[Environment]]] ; First dereference: Get context object address mov rdx, [rax + 0] ; Second dereference: Get `x` from slot 0 in the context object
I find your explanations extremely useful. Your examples and quizzes at the end are just 🤌🏻 Please, keep making these videos about how JS works under the hood and other advanced topics 🙇🏼
You are the only one that uploads a video purely for the thrill of actually teaching something new in your unique way and not one of those "new video every week" just for the sake of it. Please keep it this way.
I love visual learning and thanks for your all videos , the special one for me was event loop. Your explanation is on point nd easy words , also the motions are awesome. I request you to have an video on nodejs internal working especially thread pool and async execution of threads.
In my opinion, This is the hardest topic in JS, actually with execution context. I have to rewatch it one more time or even more. Thank you for the video.
Really well explained, if I ever have a junior in the team again, I'll refer him to your videos. What I really like is your visualizations, they are really well done and explain the processes under the hood even better.
Ok, i haven't had the time to watch everything yet because i just discovered your video 10min ago but i already liked all your published videos and subscribed to your channel because my brain needs theis type of visual aid to understand better and i want to encourage you to keep doing as many videos as you can with programming concepts! I will now proceed to share your channel to my computer programming classmates
I was just about to come over here and say I wished you'd do more of these... and there was a new one waiting for me. :) I've been doing JS for a long long long long time, so there MIGHT not be much I can actually learn from these videos but I still really enjoy watching them. I wish these had been around when I was learning, and I'd certainly recommend them to anyone who's getting to grips with JS. A lot of programming content on UA-cam is very poor indeed but these videos are absolutely great! :)
Honestly, coming from Python, I already had a pretty firm understanding of closures and scopes, but I still really enjoyed the deep explanation as well as visualizations of JavaScript internals. Great work!
Great work! I learned nothing because, hey 🤷🏻♂senior js dev, but I think this kind of crystal clear visual explanation is really great for beginers! I would have reduce headaches years ago if you had existed before Lydia ! Continue this way! :)
Can you make a video about the differences between normal function and arrow functions? Because somehow there a different, but I have struggle to understand it. For example the handling of "this" differs and when a function is declared in an object, it is different also. With your videos, I understand very well, how this stuff works in depth.
Wrote about a related issue in React some weeks back. Great explainer from you; and I especially dig the consistent wording around environment record and execution context etc. I found it hard to keep track of those definitions when writing - intermingled them with scope and variable context. You did a much better job 👏
This is so dang good. I knew _how_ closures worked, but I never knew _why_ closures worked. I feel like if I got asked this in an interview and gave this explanation, it would maybe catch the interviewers off guard. :D
First of all, amazingly explained. But, second of all, I might be wrong, but iI believe all variables not used by closures get optimized away. So I don't think you need to worry too much about large temporary variables in your closure... unless you are programming for some really old engine. I notice this frequently when using debuggers and trying to use those variable names and noticing they don't exist anymore
Recently found your channel and your videos are amazing. Great thorough explanations assisted by those amazing visuals! What tools do you use to make them? The attention to detail is so big that I imagine it takes a very long time to make all look as tight and consistent as it is.
Is it safe to say that closure variables are copies of the original variables at the times they were executed? Multiple sources keep telling me they're "captured", and NOT copied, but I have no idea what that even means. Anyways, you've made one of the best, if not the best, JS content on UA-cam. You've managed to take important JS concepts and not only explain them super in depth, but also visualize them so well for a beginner like me. Please never stop creating!
"capture" is one of those vague terms so I understand the confusion! Another term people use is "closing", as in "it closes over the variables in the outer function", which is where "closure" comes from. But once again, that is a vague term that doesn't explain what's going on :) Basically a closure is an object that has a reference to the data in its surroundings (as Lydia explains, in JS this reference is called outerEnv, and its surroundings are the outer function's environment record). So to answer your question, no, the outer function's variables are not copied into the closure: instead, when the closure wants to access one of them, it does so using its outerEnv reference. You can verify this by creating multiple closures inside the same outer function: function outer() { let outerVar = 1; function increment() { outerVar++; } function log() { console.log(outerVar); } return {increment, log}; } let {increment, log} = outer(); increment(); log(); // logs 2 If the variables were copied, then "increment" and "log" would each have their own copy, so "log" would output 1 instead of 2. Hope this helps :)
Next video has to be about 'this'! For now, whenever I try to brush up what 'this' exactly is, I have to find the 'You don't know JS' pdf and read. I want to refer to a video and not read long explanations.
In the example you showed with this large array of users, wouldn't the engine realize that userData is unused and garbage collect them? Is it only allowed to collect the entire environment record? Though giving it a bit more thought, even if it could collect userData it would still have to move the one user out of the array before deallocation.
I hoped this would be the case too, and I wonder if optimizing JIT compilers do this, but I wouldn't be surprised if non-optimizing interpreters don't. As for moving the user object out of the array, that shouldn't be an issue in JS because the user objects are all references, so that local variable is a copy of that object reference rather than a pointer into the users array, meaning a smart enough GC could safely deallocate the array as well as all the other user objects that are no longer referenced, keeping only the single user object that is strongly referenced. Again, an optimizing JIT compiler could work completely differently, but at least in the non-optimized case, all objects are pointers.
💡Understanding how functions interact with their surrounding lexical environment is very important when working with JavaScript, and it's really not as mysterious as it might seem at times haha. I hope this video was useful, visualizing the detailed inner workings of tools I'm working with always helps me understand concepts better.
I only use Apple Keynote to create the visualizations! Implementation details might differ, this is just based on the ECMA spec. Different engines may implement smarter garbage collection strategies that mitigate issues related to retaining large scopes in closures (e.g. the fetchAllUsers example).
Please marry me😭
@@codewithrahull9636 Weirdo
Can we expect more advanced javascript and how javascript work behind videos? I would love if you release 2 or 3 videos a week. Thank You
Can you please share link for ECMA spec you have referred to create above video?
Hi Lydia, This is an amazing series about Javascript, Can I ask about Which Tool have been used for Virtualize this video?
Banger after banger
The typescript guy
Bangfest
Recommendation indeed! ;)
I'm so happy you're back. Please keep making these videos because they're the best out there. I hope you can eventually cover all JavaScript topics!
if only my actual CS courses were taught this clearly. thank you for putting the time/effort into create this wonderful explanation!
As a fellow software engineer, I just wanted to say how much I appreciate your videos. They're incredibly well-done, and I only wish I had access to content like this when I was first learning these concepts. Being a visual learner, I used to draw out each concept to fully grasp them. Now, I recommend your videos to the junior devs and interns on my team-they've found them incredibly helpful. If possible, it would be amazing to see a 'JavaScript Visualized - Data Structures and Algorithms' series on your channel. I’ve been reading *Grokking Algorithms: An Illustrated Guide for Programmers and Other Curious People* by Aditya Bhargava, and I couldn’t help but think how amazing it would be to see those concepts brought to life in your visual style. Keep up the great work!
You're correct. JS Visualized - DSA series would be awesome. Those are the main focus of SE interviews. It will be a great help.
That's a great idea. I'm also a visual learner. Looking forward to a DSA series with these cool visualizations.
1. Javascript data structures and algorithms by Sammie Bae,
2. Data structures and algorithms with Javascript by Michael Mcmillan
are also good. I would love to see a visualized explanation.
@@toptrends88 good idea, I’ll try to create some :) I wrote a visualized book on all this years ago so it would be good to update!
@@theavocoder Awesome. Looking forward to it.
Great visual explanation of the concept that took me years to grasp back in a day - glad it will take less time for everyone who watches this! ;)
Wonderful video as always! I didn't realize closures hold a reference to the entire environment record: I hoped they were a bit smarter and only held references to the variables they actually used, allowing the GC to free the rest. Good to know!
Thank you! 🙏Just to get back to this - it actually depends on the implementation though; I cover the spec, but engines can use internal optimizations to eliminate "dead" variables even in such cases. V8/Chromium does this really well so in that case the issue with `fetchAllUsers` may not actually be an issue, but it's good to realize that that's not necessarily the default in all cases 😃
Yesss I’ve been waiting for this!! Thank you for keeping this incredible content going.
The way you visualise these processes is amazing!
Your videos are so helpful and I'm really looking forward to your next one.
Thank you for creating such a clear and informative video, Lydia Hallie! I would definitely recommend this video to anyone who wants to learn more about closures.
"What an explanation! Please bring more content like this frequently."
Lady, this is amazing! You have a talent for teaching. Visualization is your strong point. Thank you very much! ❤🔥❤🔥❤🔥
Your visualisations are a true inspiration! Love the simplicity and clarity they bring 👍
Your videos especially these visualized series are the best !
closure is just 2 pointer dereference, every closure variables is translated to these two instructions
mov rax, [closure + [[Environment]]] ; First dereference: Get context object address
mov rdx, [rax + 0] ; Second dereference: Get `x` from slot 0 in the context object
Thank you so much ❤. You teach with great visualizations, with great explanations and with great smile. Please keep posting such videos of JavaScript🙏
One of the best explanation on the closures.
Always you are on the point.
Please, do continue more.
I find your explanations extremely useful. Your examples and quizzes at the end are just 🤌🏻 Please, keep making these videos about how JS works under the hood and other advanced topics 🙇🏼
after watching your videos in the graphical representation . My mind is blow up.nice explanation, keep it up.
Yes, I love all of your diagrams, thank you so much for making these videos.
Yes, Lydia and her cool diagrams are back... Thanks for making these.
Really early on in my coding journey, but found this pretty fascinating. Hope to see more.
You are the only one that uploads a video purely for the thrill of actually teaching something new in your unique way and not one of those "new video every week" just for the sake of it. Please keep it this way.
I love visual learning and thanks for your all videos , the special one for me was event loop.
Your explanation is on point nd easy words , also the motions are awesome.
I request you to have an video on nodejs internal working especially thread pool and async execution of threads.
Your videos continue to be the ones I look out for when learning JavaScript. Thank you Lydia we appreciate you.
I from Brazil, and I love your content!!! Please, continue with! It is so useful.
Ma'am you're doing fabulous job👏. No loud intros, no memes but original quality content which is class and extremely rare to find.
Never been explained better than this. Thanks!
Thanks for the detailed explanation. I've always dreamed of a code visualization like this. I hope there will be more such videos.
Visuals and explanations are excellent. I have never seen tutorials presented this well.
In my opinion, This is the hardest topic in JS, actually with execution context. I have to rewatch it one more time or even more. Thank you for the video.
This channel is a goldmine
Your videos are my happy day!!! They are like the a new chapter of my favorite show!!
Really well explained, if I ever have a junior in the team again, I'll refer him to your videos. What I really like is your visualizations, they are really well done and explain the processes under the hood even better.
Ok, i haven't had the time to watch everything yet because i just discovered your video 10min ago but i already liked all your published videos and subscribed to your channel because my brain needs theis type of visual aid to understand better and i want to encourage you to keep doing as many videos as you can with programming concepts! I will now proceed to share your channel to my computer programming classmates
I was just about to come over here and say I wished you'd do more of these... and there was a new one waiting for me. :) I've been doing JS for a long long long long time, so there MIGHT not be much I can actually learn from these videos but I still really enjoy watching them. I wish these had been around when I was learning, and I'd certainly recommend them to anyone who's getting to grips with JS. A lot of programming content on UA-cam is very poor indeed but these videos are absolutely great! :)
Honestly, coming from Python, I already had a pretty firm understanding of closures and scopes, but I still really enjoyed the deep explanation as well as visualizations of JavaScript internals. Great work!
Yeah! Another awesome video! 🔥🌈 I always feel a sense of joy whenever something new comes out on this channel ❤ Thank you Lydia!
Amazing video!!
Please make a playlist for the all advanced topics in JavaScript(Hoisting, closures, this, FP, debouncing, throttling, polyfills, etc)
Great work!
I learned nothing because, hey 🤷🏻♂senior js dev, but I think this kind of crystal clear visual explanation is really great for beginers!
I would have reduce headaches years ago if you had existed before Lydia !
Continue this way! :)
Your videos are best JavaScript visualizations on the internet by far
Awesome video!! Please keep bringing more bangers like this. These videos helps A LOT.
Best explanation in the world! Keep making these videos. ❤
we need more videos like this .
Can you make a video about the differences between normal function and arrow functions? Because somehow there a different, but I have struggle to understand it. For example the handling of "this" differs and when a function is declared in an object, it is different also. With your videos, I understand very well, how this stuff works in depth.
Another excellent video! You are so good at explaining this stuff.
This is pure gold. Best JS series ever
Best tutorials on javascript on youtube, keep the good work Lydia, you're really good at explaining things, love the humor in videos!
Woah... a new video finally... can't believe JavaScript can be this easy to understand.
Wrote about a related issue in React some weeks back. Great explainer from you; and I especially dig the consistent wording around environment record and execution context etc. I found it hard to keep track of those definitions when writing - intermingled them with scope and variable context. You did a much better job 👏
amazing videos and explanations and visual examples . thanks thanks and many thanks , please go on
This is so dang good. I knew _how_ closures worked, but I never knew _why_ closures worked. I feel like if I got asked this in an interview and gave this explanation, it would maybe catch the interviewers off guard. :D
Interviewers might reject you thinking you are making stuff up
Great Explaination, Keep these videos coming.
Thorough and well structured. Thank you
The explanation was so clear that I now completely understand what JS closures are. Additionally, I also got closure to why my ex broke up with me.
The only YT videos I like before hitting play
ah thank you!! 🙏 but please don't be afraid to let me know if there are things you don't like, haha
Awesome explanation Lydia 🔥
Great explanation with Great Visualization! Looking forward to seeing more content like this!
First of all, amazingly explained.
But, second of all, I might be wrong, but iI believe all variables not used by closures get optimized away.
So I don't think you need to worry too much about large temporary variables in your closure... unless you are programming for some really old engine.
I notice this frequently when using debuggers and trying to use those variable names and noticing they don't exist anymore
I won't skip ads for you, thanks a lot
Thank you so much, Lydia, really useful and clear explanation
Lydia great explanation & visual effect are amazing.
This is a legendary quality content!
Wow this is really amazing, I hope you keep making videos like this
Thank you for your visualized videos They are so much helpful
after watching other's videos in 2x to save my time, it was pleasure watching your explaination in 0.75x.
You're amazing!! These videos so helpful.
Wow great explanation. Please make a video on "this" key word in JavaScript
Excellent explanation and the way u present phew! thanks for doing this for free....
Recently found your channel and your videos are amazing. Great thorough explanations assisted by those amazing visuals! What tools do you use to make them? The attention to detail is so big that I imagine it takes a very long time to make all look as tight and consistent as it is.
Your videos and explanations are best
very nice visualizations, and amazing explanations!
As usually, detailed breakdown on the internal working 💯
Great video! Please keep making videos like this :)
Welcome back your explanation is great keep it up
Hello ,can you make videos on these advance topics :
1. Prototypal Inheritance
2. Currying
3. Throttling
4. Debouncing
5. CORS
Great topic, thanks 👍
Goog!! Im looking forward to hear about iterators
Me gusta como presentas la información; es muy entendible aunque no entienda el inglés. Saludos.
Brutal! Perfect, now I got it
Nice explanation. What software you use for the animations?
Pls make a JavaScript course or Typescript or any tutorial for that matter but pls do make one !! 💙
Is it safe to say that closure variables are copies of the original variables at the times they were executed? Multiple sources keep telling me they're "captured", and NOT copied, but I have no idea what that even means.
Anyways, you've made one of the best, if not the best, JS content on UA-cam. You've managed to take important JS concepts and not only explain them super in depth, but also visualize them so well for a beginner like me. Please never stop creating!
"capture" is one of those vague terms so I understand the confusion!
Another term people use is "closing", as in "it closes over the variables in the outer function", which is where "closure" comes from. But once again, that is a vague term that doesn't explain what's going on :)
Basically a closure is an object that has a reference to the data in its surroundings (as Lydia explains, in JS this reference is called outerEnv, and its surroundings are the outer function's environment record). So to answer your question, no, the outer function's variables are not copied into the closure: instead, when the closure wants to access one of them, it does so using its outerEnv reference. You can verify this by creating multiple closures inside the same outer function:
function outer() {
let outerVar = 1;
function increment() {
outerVar++;
}
function log() {
console.log(outerVar);
}
return {increment, log};
}
let {increment, log} = outer();
increment();
log(); // logs 2
If the variables were copied, then "increment" and "log" would each have their own copy, so "log" would output 1 instead of 2.
Hope this helps :)
this fantastic, ❤thank you so much you adorable angel of a person ❤ so much hard work and great explanation, please keep making new videos 🙏
Great video and absolutely interesting and easy to understand...BTW Can you make a whole JS tutorial from beginner to advanced? it would be so cool
this shit making me feel hella dumb and hella smart at the same time
Thanks for sharing this video! It was really useful
Waited for a long time to get the video!😮
You are great about explaining JavaScript ❤❤
How do you do such kind of visualization? What app do you use for it?)
Make more of these videos(js), thanks for your information
Awesome job! Keep it up. This is great content.
Gold content. THANK YOU VERY MUCH
This is insane🔥🔥 the visualization and explaination, also if youcreated this with keynote, just how many slides are in there😂
the GOAT has returned
Next video has to be about 'this'!
For now, whenever I try to brush up what 'this' exactly is, I have to find the 'You don't know JS' pdf and read. I want to refer to a video and not read long explanations.
Brilliant visual explanations! how do you do your animations? What software do you use?
Been waiting on this one ❤️🙌
Thank you very much for the great content ❤
In the example you showed with this large array of users, wouldn't the engine realize that userData is unused and garbage collect them? Is it only allowed to collect the entire environment record?
Though giving it a bit more thought, even if it could collect userData it would still have to move the one user out of the array before deallocation.
I hoped this would be the case too, and I wonder if optimizing JIT compilers do this, but I wouldn't be surprised if non-optimizing interpreters don't.
As for moving the user object out of the array, that shouldn't be an issue in JS because the user objects are all references, so that local variable is a copy of that object reference rather than a pointer into the users array, meaning a smart enough GC could safely deallocate the array as well as all the other user objects that are no longer referenced, keeping only the single user object that is strongly referenced. Again, an optimizing JIT compiler could work completely differently, but at least in the non-optimized case, all objects are pointers.