💡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).
@codewithrahull963626 күн бұрын
Please marry me😭
@mattpocockuk26 күн бұрын
@@codewithrahull9636 Weirdo
@ksubramanyeshwara26 күн бұрын
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
@nitishjs571911 күн бұрын
Can you please share link for ECMA spec you have referred to create above video?
@hieplevan19352 күн бұрын
Hi Lydia, This is an amazing series about Javascript, Can I ask about Which Tool have been used for Virtualize this video?
@mattpocockuk26 күн бұрын
Banger after banger
@AkashSingh-hs5sg26 күн бұрын
The typescript guy
@StarsManny24 күн бұрын
Bangfest
@edgeeffect14 күн бұрын
Recommendation indeed! ;)
@ilisiedenis587726 күн бұрын
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!
@toptrends889 күн бұрын
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!
@brb6399 күн бұрын
You're correct. JS Visualized - DSA series would be awesome. Those are the main focus of SE interviews. It will be a great help.
@SEngMedia9 күн бұрын
That's a great idea. I'm also a visual learner. Looking forward to a DSA series with these cool visualizations.
@ProJSGrammer9 күн бұрын
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.
@theavocoder9 күн бұрын
@@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!
@toptrends888 күн бұрын
@@theavocoder Awesome. Looking forward to it.
@amitavasengupta558021 күн бұрын
Ma'am you're doing fabulous job👏. No loud intros, no memes but original quality content which is class and extremely rare to find.
@ChesterSerenityКүн бұрын
Best tutorials on javascript on youtube, keep the good work Lydia, you're really good at explaining things, love the humor in videos!
@TerabyteTy30026 күн бұрын
Yesss I’ve been waiting for this!! Thank you for keeping this incredible content going.
@SergeyChernyshev26 күн бұрын
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! ;)
@filipbystricky730126 күн бұрын
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!
@theavocoder22 күн бұрын
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 😃
@Kue_J24 күн бұрын
The way you visualise these processes is amazing! Your videos are so helpful and I'm really looking forward to your next one.
@amahmuudd24 күн бұрын
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.
@chrislanejones25 күн бұрын
Yes, Lydia and her cool diagrams are back... Thanks for making these.
@Abated25 күн бұрын
Really early on in my coding journey, but found this pretty fascinating. Hope to see more.
@mjawale123455 күн бұрын
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.
@j2devstudio26 күн бұрын
Your videos especially these visualized series are the best !
@saifullahrahman24 күн бұрын
This channel is a goldmine
@edgeeffect14 күн бұрын
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 KZbin is very poor indeed but these videos are absolutely great! :)
@madhuiitb-cse26 күн бұрын
One of the best explanation on the closures. Always you are on the point. Please, do continue more.
@Brandonverzuu26 күн бұрын
Your visualisations are a true inspiration! Love the simplicity and clarity they bring 👍
@chrislanejones25 күн бұрын
Yes, I love all of your diagrams, thank you so much for making these videos.
@AryanSharma-lg7pn22 күн бұрын
"What an explanation! Please bring more content like this frequently."
@user-zl5ye1en7u26 күн бұрын
Lady, this is amazing! You have a talent for teaching. Visualization is your strong point. Thank you very much! ❤🔥❤🔥❤🔥
@_victorjansson24 күн бұрын
Never been explained better than this. Thanks!
@hackytech749426 күн бұрын
Thank you so much ❤. You teach with great visualizations, with great explanations and with great smile. Please keep posting such videos of JavaScript🙏
@musti-mm126 күн бұрын
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.
@stio_studio26 күн бұрын
This method could be a cool way to create classes without classes. Thanks for the idea :D
@edgeeffect14 күн бұрын
This was actually how classes were implemented back in prehistory (Algol). Some of us will say this is "the right way" to do OO in JS.
@zephilde24 күн бұрын
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! :)
@BornInBharat19 күн бұрын
Best explanation in the world! Keep making these videos. ❤
@elyoaprogrammer25 күн бұрын
Your videos are my happy day!!! They are like the a new chapter of my favorite show!!
@mdahoradev5 күн бұрын
Awesome video!! Please keep bringing more bangers like this. These videos helps A LOT.
@TechSpot5626 күн бұрын
Great Explaination, Keep these videos coming.
@user-wu4np2qo7j23 күн бұрын
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.
@rebelmachine8826 күн бұрын
Another excellent video! You are so good at explaining this stuff.
@subhajitdas278422 күн бұрын
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.
@akj334425 күн бұрын
Visuals and explanations are excellent. I have never seen tutorials presented this well.
@dedmanraizd26 күн бұрын
Your videos continue to be the ones I look out for when learning JavaScript. Thank you Lydia we appreciate you.
@SaschaFuchs25 күн бұрын
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.
@penguindrummaster26 күн бұрын
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!
@JoeBuza23 күн бұрын
Thorough and well structured. Thank you
@iamzeeali22 күн бұрын
Amazing video!! Please make a playlist for the all advanced topics in JavaScript(Hoisting, closures, this, FP, debouncing, throttling, polyfills, etc)
@Kurigohan-and_k26 күн бұрын
Yeah! Another awesome video! 🔥🌈 I always feel a sense of joy whenever something new comes out on this channel ❤ Thank you Lydia!
@REAL_Fred_Walker25 күн бұрын
Your videos are best JavaScript visualizations on the internet by far
@Luisllaboj1926 күн бұрын
At this point we could just have LydiaScript specs :P amazing videos, all of them! Also, would you ever talk about the "this" keyword? Why does it behave in different ways if it's inside an arrow function? Thank you a lot for this series!
@roskiboy26 күн бұрын
Me gusta como presentas la información; es muy entendible aunque no entienda el inglés. Saludos.
@KlausKazlauskas13 күн бұрын
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.
@michaelharrington586026 күн бұрын
The only YT videos I like before hitting play
@theavocoder26 күн бұрын
ah thank you!! 🙏 but please don't be afraid to let me know if there are things you don't like, haha
@m57-tf3tk26 күн бұрын
same here lol
@letswalksomewhere26 күн бұрын
Bro wtf I was just reading some of your articles and I thought "why wouldn't she have more of the visualized JS tutorials instead of this, I wonder when will be the next time that she uploads a video", I switch to KZbin, there she is, recommended at the top, insane.
@sawekccc221125 күн бұрын
This is pure gold. Best JS series ever
@RakeshSingh-vl2mz26 күн бұрын
Awesome explanation Lydia 🔥
@starmechlx23 күн бұрын
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
@cannotthinkofanybetterhandle23 күн бұрын
Interviewers might reject you thinking you are making stuff up
@kevinschiener26 күн бұрын
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 👏
@soheil275924 күн бұрын
Thank you for your visualized videos They are so much helpful
@BilalAhmed-nx6sr26 күн бұрын
Woah... a new video finally... can't believe JavaScript can be this easy to understand.
@FadingSuns-dn5hy25 күн бұрын
This is a legendary quality content!
@TemuriKitoshvili24 күн бұрын
Your videos and explanations are best
@adi.ranjan00719 күн бұрын
Wow this is really amazing, I hope you keep making videos like this
@user-uz2xi7tq6e16 күн бұрын
after watching other's videos in 2x to save my time, it was pleasure watching your explaination in 0.75x.
@gerunkwon259826 күн бұрын
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 KZbin. 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!
@filipbystricky730126 күн бұрын
"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 :)
@sabermazoji-s7b16 күн бұрын
Great video! Please keep making videos like this :)
@frankdearr277216 күн бұрын
Great topic, thanks 👍
@parthjohar227326 күн бұрын
Great explanation with Great Visualization! Looking forward to seeing more content like this!
@HeyMr.OO724 күн бұрын
Pls make a JavaScript course or Typescript or any tutorial for that matter but pls do make one !! 💙
@paulvanjaarsveld5552Күн бұрын
Brilliant visual explanations! how do you do your animations? What software do you use?
@viktorpavlovych25 күн бұрын
Thank you so much, Lydia, really useful and clear explanation
@sanjeebpadhi821026 күн бұрын
Lydia great explanation & visual effect are amazing.
@venusxu270926 күн бұрын
video 7:12, is wrong? “increment : createCounter Function Object” => “increment : increment Function Object”
@the-old-channel26 күн бұрын
For the last example, would a fix be as simple as adding `userData = null` after finding the `user`? I also wonder why the engine couldn’t be smart about what variables are ACTUALLY captured by a closure and drop everything else. I think Rust does something similar (but it is compiled, so the comparison is not completely fair)
@user-yz4dm6sv6x8 күн бұрын
Nice Works! What tool did you use to make that infographic? It looks super useful!
@KobiBHat25 күн бұрын
Could you please explain how the V8 engine works in the Node.js runtime and also in the browser? Thanks a lot for your guidance!
@fullaccess264526 күн бұрын
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.
@filipbystricky730126 күн бұрын
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.
@wduandy21 күн бұрын
Nice explanation. What software you use for the animations?
@tienvohoang535913 күн бұрын
I've just completed the JustJavaScript course by Dan Abramov. It's really interesting that the way he explained Closure and the way you did are very different, but together they complete my mental model. Thanks a lot for the thorough explanation. By the way, what video-editing software did you use to create these videos?
@cieranholmes25 күн бұрын
the GOAT has returned
@varun-ns1nf26 күн бұрын
Wow great explanation. Please make a video on "this" key word in JavaScript
@anispinner26 күн бұрын
It's worth creating a closure of this channel.
@abhijitez26 күн бұрын
As usually, detailed breakdown on the internal working 💯
@hammad876623 күн бұрын
Please add some laser pointer dots or something so that it is exactly visible what you are talking about. Other than that, great video as always
@nikbivation26 күн бұрын
very nice visualizations, and amazing explanations!
@nguyenucan474623 күн бұрын
Awesome works!
@AbelAdane-s5h26 күн бұрын
Welcome back your explanation is great keep it up
@Anbaraen26 күн бұрын
Hun, come quick. Lydia uploaded
@petazeta7626 күн бұрын
Goog!! Im looking forward to hear about iterators
@user-sg2kg3lc8q26 күн бұрын
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
@Vedarta8 күн бұрын
My god, your videos are awesome!👏🏻👏🏻👏🏻
@manishshaw100226 күн бұрын
Waited for a long time to get the video!😮
@karansethia103726 күн бұрын
This is insane🔥🔥 the visualization and explaination, also if youcreated this with keynote, just how many slides are in there😂
@speedfreaksusa2Күн бұрын
Are you sure that userData will be preserved in memory? I believe the js engine slims this down to only user and userId and does not hold a reference to the entire lexical environment but I could be wrong
@utkarshranpise204615 күн бұрын
Can you make a video ? on visual explanation on how loops work in js with all conditions,particularly lets say for loop,how does it increment or decremnt,how the loop break and returns value
@ShervanDev16 күн бұрын
Make more of these videos(js), thanks for your information
@Simon-ir6mq26 күн бұрын
so every time I do a callback I prevent all local variables from being garbage collected? It kind of makes sense but seems really wasteful, since I might compute some large auxiliary array in a function and then add a click handler from that same function. The click handler prevents the array from being garbage collected even though it does not use the array? Feels like a memory leak. Really amazing animations, great video!
@denishclarke447024 күн бұрын
Wake up, she's back
@SISSPON26 күн бұрын
thank you ! can you make a video about prototype please
@lunaumbra517924 күн бұрын
I left Javascript programming almost a decade ago and either, all these words/lexicon were there the whole time or JS and the people who use it have gone HARD on names and definitions. Wow. I never heard the terms ExecutionContext, EnvironmentRecords, Closures, LexicalEnvironment, etc. We had Scope, Context, Stack. That's about it lol. What happened? Did we just expose the underlying language of the interpreter/runtime? OR did we need better language to express how JS worked?
@kartikkaushik474326 күн бұрын
Incredible share
@nitinthewanderer26 күн бұрын
Please keep posting these advanced JS concepts so that a poor like me can access good content .
@tahasin232126 күн бұрын
You are great about explaining JavaScript ❤❤
@fazzyakamello26 күн бұрын
Thanks for sharing this video! It was really useful
@coofzilla25 күн бұрын
how do you create these visuals? is it just simply keynote? beautiful stuff and great video.