JavaScript Closures Tutorial (Explained in depth)

JavaScript Closures Tutorial, FINALLY explained!
Full playlist here: • 20 Things JavaScript D...
Closures are incredibly difficult to explain and understand, and sadly they come up in interviews all the time. Why do we need Closures? And how can you use them to your advantage?
JavaScript Closures from the series "10 Things JS Developers Should Know"
by ColorCode.io, Sina Jazayeri
This is episode 9 in a 10 part series I’m calling 10 things javascript developers should know but probably don’t. In this series, we’re going to cover some of the most fundamental and important parts of JavaScript that most of us don’t actually know, and barely touch. Today, for episode 9, we’re talking about JavaScript Closures, what do they actually mean, why they exist, and how to use them. Episode 9: Closures. Let’s go!
All the code from this series is available here:
github.com/ColorCode/js-10-th...
0:00:00 Intro
0:01:23 What is a Closure?
0:02:14 Theoretical Example: Outer function + Inner function
0:11:14 What makes Closures special
0:11:28 Practical Example: Click handlers
0:17:28 Outro

[@ColorCodeio]

JavaScript closures! 🎉💻

[@satk2554]

It's been a month and half, please drop in the finale...!!!

[@ColorCodeio]

@@satk2554 Most likely this weekend.

[@DevCoder]

can you explain Hoisting in js too😊

[@ColorCodeio]

@@DevCoder Good idea

[@dansmar_2414]

It's not just a javascript tutorial, but also how to comunicate and express yourself. This series is on my top bookmarks now. Thank you again!

[@ColorCodeio]

You’re welcome! 😀

[@thomaswinterburn6680]

Excellent video explains it so well, I did some digging and found why it stays in memory. So like quantum entanglement theory, the outer function is entangled with the inner functions so, the JavaScript engine uses garbage collection to clean up memory that is no longer reachable. Because the inner function still has a reference to the outer function's environment, that environment is considered reachable and isn't garbage-collected. This allows the inner function to access variables from the outer function even after it has finished executing.

[@nyxthevoyager]

The intro was a couple of seconds, but pretty inspirational. Thank you! I decided to change my career at 28, and everyone looks like they know everything about programming. I am too late for the party. Knowing this little ptsd of yours is supportive of people like me!

[@ColorCodeio]

You are definitely not too late to the party. You have plenty of time. Keep pushing.

[@vladislavamarkova8379]

Another great explanation of a topic which is indeed hard to grasp! Clear, practical, and so nice to watch! Thank you, keep going that way. Wish you all good! : )

[@ColorCodeio]

Thanks Vladislava!

[@rafahathibrahim]

First time on your channel and now also my favourite for javascript. Theres so much quality in your work, and that too is for free. Thankyou, you have my utmost respect.

[@ColorCodeio]

Thank you

[@fariskanbur5428]

Another excellent explanation :) We are looking forward to the coming of such series about js and similar special topics. Thank you very much for answering many questions on many people's minds.

[@ColorCodeio]

Thanks Faris

[@eumm11]

these videos are so well done that you barely notice the time passing

[@ColorCodeio]

😀

[@andcap2239]

What a great channel!!! OMG, this is all i needed to understand some of the difficult stuff into JS. Thks for your content!

[@ColorCodeio]

Great to hear!

[@jomariiringan8724]

Awesome! This is one of the question from my job interview together with the Higher order function which you explain it much simpler than i imagine. This will also improve my code structure & development performance, Thanks!

[@ColorCodeio]

Glad it was helpful!

[@aziham.]

Wow, Sina! Your last example on closures was exactly what I needed to finally appreciate their usefulness. Previously, when passing a function to an event handler, I always wondered how I could pass something to that function while also passing it to the event handler. I was concerned that it would execute immediately rather than when the event occurred, and that I would only have access to the event object. However, your example has answered all of my questions. Thank you so much, Sina! Your teaching style is phenomenal, and I would love to see you make a video tutorial on JS debouncing. I've watched a lot of videos on the subject, but I think your approach would be particularly helpful.

[@ColorCodeio]

Thanks, that’s a good idea.

[@75jkd]

I am in a full stack program and I think I learned more about closures in this video then the class on them in school. Awesome!

[@ColorCodeio]

Glad I could be helpful. What are you learning in your class?

[@thomaswinterburn6680]

School for fool @@ColorCodeio

[@B-Billy]

This is first time on your channel, and I am amazed by the the knowledge you put and the video editing & presentation skills are PRO. Perfect!! 🎉🎉

[@ColorCodeio]

Thank you

[@tyv1383]

I feel like he should have more subscribers, it’s the only closure video I’ve seen so far that goes really in depth with the examples

[@arghyadas2836]

@@tyv1383 I totally agree. These videos are really well explained. His presentation is also top notch.

[@J4RMAMS]

You’re great Sina!!! You’re god sent and put out quality content that clarifies JavaScript concepts that are sometime not very digestible for new developers and aspiring ones.

[@ColorCodeio]

You are so welcome!

[@quangtranoannhat2930]

Great video. Thanks for making me have a deeper understanding of Closure

[@ColorCodeio]

You're welcome :)

[@steffancrowley]

Honestly this is the best video on the closures I’ve seen, thanks!

[@ColorCodeio]

Thank you

[@keronwilliams5392]

Love this series! Thank you King!

[@ColorCodeio]

You’re welcome 🙏🏼

[@mlbbfans]

Really like the way you explain the concepts. How nice would it be if you create a video convering all the fundamentals of JavaScript in one video

[@thegohmez6816]

Amazing. About halfway through I figured out....I have been using closures this whole time. Another great example is writing a custom hook to fetch in React. Great stuff. You describe things really well.

[@ColorCodeio]

Awesome 🎉

[@apq2589]

What a great class you have brought us! I agree with you that this is a very though theme, but you had explained it with in a terrific way! Thank you Sina Qoli! 😃

[@ColorCodeio]

Thanks!

[@snode373]

Dude. A real person here. Thank you for everything. I'll always come back here and will bring others with me. Much love ✌🏽

[@ColorCodeio]

Thank you. Made my day :)

[@ssyedyaseens]

This is incredible! Thanks for this!

[@ColorCodeio]

My pleasure!

[@FameRK]

Well explained. Worth the wait. Thank you.

[@ColorCodeio]

Thanks dude

[@137dylan]

I have been studying JS since early last year, and despite thinking I already had a strong grasp of closures, this video helped bolster my understanding. Molte grazie! It would be great if you released some videos on TypeScript as the trend indicates it will be the standard for FE development (at least) in the coming years.

[@ColorCodeio]

Thanks! I'll consider TS for future videos.

[@santhoshk9285]

great video 🔥 waiting for eps 10

[@ColorCodeio]

Will be coming soon

[@karthikk6769]

You have my respect. Great explanation.

[@ColorCodeio]

Thank you 🙏

[@Icode2395]

The Last example was insane🔥

[@ColorCodeio]

🔥

[@xViolaine]

Pretty sure it's also directly taken from MDN Webdocs under "Practical Closures"

[@hansheinrich700]

The click handler is a good real world example! However, I think in this case it would've been great to move your code from the browser console to a code editor. The browser console is great for bugfixing and testing but maybe sonewhat confusing for beginners. Apart from that: great video.

[@abelmarkos5753]

Very nice This tutorial series helped explaining Alot of the most confusing and hard to understand topics in javascript So thank you very very much for that

[@ColorCodeio]

That’s awesome! I’m glad

[@anejasahil]

The best explanation of closures on KZbin i have ever seen

[@ColorCodeio]

👍

[@ankitrawat927]

Well done Sina !! Thanks for the explanation.

[@ColorCodeio]

🙏

[@alexgill1997]

Another great video! An ASYNC video would be a blessing!

[@ColorCodeio]

Great suggestion!

[@mattsmith6828]

@10:30 - This all makes sense. I think it's also worth noting the difference between instance variables (object properties) and local variables - which can be created in a function but not in other objects. Inside of this function, "const name = n", the variable "name" is a local variable. The only ways to access this variable are to access it from inside of the function, to use a "getter" function or include it in a "return" expression. On the other hand, inside of a function, instance variables (not listed in this function) are declared using the "this" keyword as an access modifier. Ex - this.age = 21 Instance variables inside of a function are basically the same as a property inside of an object (excluding functions). Instance variables are accessible from outside of a function, but only after creating an INSTANCE of that function, hence the name. Local variables inside of a function are inherently protected because they have block-level scope to that function. Parameters in a function are actually declared and instantiated in the body of the function as local variables. In this example, he's using "human" as a (callable) function, and not as an object. I know this because he's invoking "human" without the "new" keyword, and he also included a "return" expression. It's also a hint that he didn't create any instance variables, using the "this" keyword. I hope this helps someone. I'm still relatively new at this, but I think I'm catching on. Great video!!!

[@zackplauche]

Dude your editing among coding videos and explaining concepts is absolutely supreme! How can I be like you?

[@shaunlobsinger]

This was a great video! When I started deving forever ago, I wish someone would have explained it to me like this 😆

[@ColorCodeio]

Haha thanks dude

[@nikhilchauhan7511]

a really good video. you explained closure really well.

[@ColorCodeio]

Thanks!

[@Kannada_discover]

This is your teaching is pretty good...keeep continue dude

[@ColorCodeio]

Thanks!

[@chucksresume7203]

Excellent content and explanation. Subbed.

[@ColorCodeio]

Thanks Chuck.

[@mdshoharabpk1126]

you are so great and also your explanation is so great. thank you so much.

[@ColorCodeio]

🙏

[@user-de4zh8qm4w]

loved the explanation

[@eazy2195]

Great example, understood clearly, if you console.log sina for example and click on the functions, you can see, at least in the chrome browser, under scopes it actually says Closure and it shows you the variables that are being saved or remembered from the original function, it even displays the original function name

[@EdwinManual]

Very underrated channel. Great videos bro. Keep doing it.

[@ColorCodeio]

Thank you!

[@puchkag.p6459]

You deserve more subs mannn... Keep up the quality Content 😀😀

[@ColorCodeio]

Thanks

[@sumonbarai7218]

you are a great teacher . thanks for every video that's are provide javascript community. watching from Bangladesh 🇧🇩🇧🇩

[@ichiroutakashima4503]

I know this is a year old video but it is still very helpful. I hate that I'm using closures but I don't know how to explain it. It's like, watching a video in another language without subtitles. Though you can understand it, you can barely speak it. That's how closures to me are.

[@ColorCodeio]

I hear you

[@AhmadAli-wt8zy]

You are amazing teacher you deseve more subscribers👍👍

[@ColorCodeio]

Thank you. With time subscribers will come 😉

[@jatilyadav4000]

New Subscriber... Just loved your content...Want to gain more knowledge from your content... Keep uploading Best of luck Sir.........

[@ColorCodeio]

Welcome aboard!

[@essaadi_elmehdi6784]

That's great my brother, thank you 🖤🔥

[@ColorCodeio]

👍🎉

[@JoeBoo532]

Loving how you present your video! I have to ask what them is that being used on your video? :)

[@ColorCodeio]

It's just Chrome DevTools console in dark mode.

[@toneking972]

Great explanation. I would add that variable value is long lived because closure variables are placed into heap memory and not the stack memory.

[@raymondogbuehi]

What does this mean exactly?

[@pranavgpr5888]

God, really a great video of explanation! Looking forward for more videos like this. Keep rocking 💥⚡

[@ColorCodeio]

Thank you!

[@oilybrakes]

Something makes me believe that the better example for closures, would have been a website with an input field, which has to wait 2sec before processing the data, so that we make sure that user is done typing. (Such as how search engines do it, that fetch possible suggestions of what it is that you are typing in) Not sure how to code it, but I remember that when I did, closures was something I had to think about.

[@satk2554]

Absolute code-heavy content from this series and the viewers will be gifted with all the valuable information explained in a crystal clear manner. After all, I am calling people `Sina` and `Qoli` in real LOL.....!!! Respect from INDIA.

[@ColorCodeio]

Haha that's hilarious. Thanks Sat!

[@mihaipascu4975]

Excelent tutorial !!! Thanks !!!

[@ColorCodeio]

👍

[@mabutzke]

This explanation was great! I went ahead and created this crazy closure example lol. It creates a function on the fly with a combination of function factories: function math() { function calc(x) { return function (y) { return x / y } } return function (n) { const y = calc(n) return function (z) { return y(z) // Function created on the fly } } } const divide = math() const example = divide(6)(3) const example2 = divide(12)(4) console.log(example) // 2 console.log(example2) // 3

[@ColorCodeio]

Push it up to GitHub and send me a link. Very difficult to read it in comments.

[@baxilio3518]

great video, thanks a lot for the effort

[@ColorCodeio]

Glad you liked it!

[@user-mw5bm2xh9x]

thanks for the explanation

[@AhmadAli-wt8zy]

why this guy don't have subcribers?

[@danielbenson2627]

TBH, your YT Shorts invited me to your channel, as you were among the few to successfully fit the concept of closures in a minute video 😅😅 Coming to your page for the first time today, i am really glad for KZbin to suggest your page to me Thank you for the Teaching, very attention grabbing and visual... God bless you ❤❤

[@ColorCodeio]

Thanks for taking the time to write 👍

[@jakubfrei3757]

I love Your sense of humour in combination with explaining, thx And sub:)

[@ColorCodeio]

Awesome, thank you!

[@beckychan5792]

Thank you Sina!

[@ColorCodeio]

You’re welcome

[@DevCoder]

awesome and clear explain, thank you so much, can you explain Hoisting in js too😊

[@ColorCodeio]

Good one. I'll do an episode on it.

[@alfredpithu]

Man! I am a fan now. Take love from Bangladesh ❤

[@ColorCodeio]

Hello Bangladesh

[@piotrdros430]

I hope your channel will grow, as I by watching your videos

[@ColorCodeio]

Thank you ♥

[@carsugarmodels]

Bravo! Very nice explanation

[@ColorCodeio]

Ty!

[@basilvj1227]

can you explain advanced react hooks like useMemo etc. Btw great presentation

[@user-uq3mp6de4n]

I wanted to ask at 15:50 does writing return inside clickhandler would work instead of creating function.

[@ColorCodeio]

Yes it would

[@ClashRoyale-pt9zj]

excelent video. Your talking is unique

[@ColorCodeio]

🙏

[@thunderstruckx996]

Amazing quality of video, well spoken and multiple examples. Definitely a like and subscribe from me!

[@ColorCodeio]

Awesome!

[@youshouldaknown]

closures are variables and functions that are within the components function.

[@samanehhg4347]

Thanks for your great explanation🙏 can you please have some c++ tutorials too??

[@ColorCodeio]

Last time I wrote C++ was 20 years ago. Probably not the best person to teach it 😃

[@AndrewTSq]

Lol. I have watched 3 big youtube developers explaining closures , and they made it sound like some global variable. or maybe a class. but now I even understand why I should use it!. big thanks.

[@ColorCodeio]

Awesome! 🤘

[@sanvirahmed]

In your channel, the about section says, 'Coding Tutorials for regular people! 🎉👨🏻‍💻📽 ' but, you are irregular 😃 By the way, I'm a fan of your explanation style. I look forward for your video. 🥰

[@MikeJazayeri]

Awesome video!

[@ColorCodeio]

Sank you 🙏

[@kirupaagar6674]

What kind of human are u..watched hell lot of videos on this topic..but now am crystal clear

[@ColorCodeio]

Awesome!

[@kirupaagar6674]

@@ColorCodeio sir, you have any plan to have complete. JS course?

[@ColorCodeio]

​@@kirupaagar6674 Yes. It was planned to be released earlier this year but it will be closer to the end of the year. Sign up here for early access: www.colorcode.io/js-mastery

[@kirupaagar6674]

@@ColorCodeio done signup... Waiting for First day first show

[@ghasembaghban.g7887]

GREAT!

[@kaltube4817]

Well Done

[@Kourosh_ey]

You are the best! 😍

[@ColorCodeio]

You too

[@yazeezy4425]

This channel rocks!

[@ColorCodeio]

You rock too

[@powerpulsar3]

Good explanation 👍👍.

[@ColorCodeio]

👍

[@k0secha]

TI ptsd is real 😭😭😭 thanks Sina 💯💯💯

[@ColorCodeio]

😳😭

[@pharmacistbuilder]

are you able to share another real world example of closures, or perhaps a common use case for closures ?

[@khanalhome2988]

Beautiful just Beautiful and Thank you too

[@ColorCodeio]

Thank you

[@Salah-YT]

12:30 painful to type inside the console, ok bro this is what I'm talking about ok bro I'm a beginner and I'm struggling with JS for about a year now so that is why I said better use VScode it will be good for everyone and me :-) so please I Love ur channel ur so clever and explains a very good and funny time I like that so thank u so much bro I was looking for that u say painful :-) thx bro keep it up, please

[@user-fp9hl9cf1q]

You are the best!

[@ColorCodeio]

🙏🏼

[@SahilKumar-xz1xs]

Very good tutorial. That click handler example was too good. I used onClick in place of onclick and struggled for half an hour 😪

[@TechleadConsulting]

You are the best 🎉🎉🎉🎉

[@ColorCodeio]

So are you

[@youmnaification]

Isn't that the inner has to be returned in order to call it a closure. I think what you were showing us was just a lexical scope being accessed by the inner funcs.

[@severgun]

Ok closure holds outer values at creation moment. 16:20 Why not to pass size inside function as parameter?

[@wiktorchojnacki9746]

You could, but that is unnecessary as the value is already available inside the inner function. Creating another parameter as you suggest would allocate another piece of memory towards holding that value

[@JJ-ot3ps]

hey for the second example, I am not sure if i got closure lol, for the first example I got it, so when you return object from the function in that case it is a bunch of methods, and then you later create instances that can still invoke the methods of the human function even though human function is gone. the reason is because once human is called, human function is gone. But somehow the method did not gone? ....

[@nermeenaliabdelhakeem422]

Thank you a lot

[@ColorCodeio]

👍

[@canklc5772]

a late discovery for me. thanks bro

[@3prohor]

Brate, svaka ti se dala i na kolena pala.

[@sc657953]

I have found the following two situations in websites with closures. I am wondering if you can shed light on why people would do this? First, a function is invoked at return. Like the following (note that the wt function does not return a value): return wt() Second, a variable being set in a return. Like the following: return t.m = e If anyone that sees this can shed light on this it would be greatly appreciated. I'm utterly confused as to why anyone would do those.

[@robertoromanramirez4080]

sina you're awesome

[@ColorCodeio]

Roberto you’re awesome too!

[@ritikarana757]

Awesome :)

[@ColorCodeio]

Thank you!

[@thedevbek]

Thanks for explaining this thang called closure... I love your hair.

[@ColorCodeio]

Thanks!

[@dhaneshmane]

perfect

[@Pareshbpatel]

An excellent tutorial on JS Closures. Thanks, Sina. {2023-06-19}

[@ColorCodeio]

👊👍

[@abdosameh6391]

I love this vidoe 😍😍

[@ColorCodeio]

This video loves you back