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!
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.
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.
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.
@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!!!
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.
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
I always wondered why I couldn't run a function as a callback for a click eventlistener with a given value.. why it wouldn't work until this video. Thank you very much!
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! : )
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.
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 TH-cam to suggest your page to me Thank you for the Teaching, very attention grabbing and visual... God bless you ❤❤
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!
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.
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.
I am new to closures, but the thing I use most for it is either if I need a decorator, or a global memory archive. I like closures rather than func.attribute such as func._metaData. I would rather have a metaDataClosure to store and track metaData than a func._metaData. Closures are magical. Quite lovely.
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.
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.
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
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
@@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
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! 😃
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.
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.
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
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. 🥰
if you understand HOF and the functional paradigm in general, then closures are just a normal thing. For some reason the OOP world needs to make this complicated. closures are glorified objects: the "outer" function is the constructor, the "name" field/property is the state, the "inner" function acts on that property. Return the "inner" from the "outer"? Now the "outer" is a HOF "its all functions?" "always has been"
This video has an issue when playing on TH-cam via a smart TV, the audio cuts for no reason, other videos are fine but mostly this channel's videos audio get broken on tv
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.
JavaScript closures! 🎉💻
It's been a month and half, please drop in the finale...!!!
@@satk2554 Most likely this weekend.
can you explain Hoisting in js too😊
@@CSCoreDecoded Good idea
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!
You’re welcome! 😀
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!
You are definitely not too late to the party. You have plenty of time. Keep pushing.
30 ✋🏼
@@0ninetyseven97 good luck!
Dude. A real person here. Thank you for everything. I'll always come back here and will bring others with me. Much love ✌🏽
Thank you. Made my day :)
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.
thanks for this dude
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!
Glad I could be helpful. What are you learning in your class?
School for fool @@ColorCode-io
these videos are so well done that you barely notice the time passing
😀
The best explanation of closures on TH-cam i have ever seen
👍
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.
Thanks, that’s a good idea.
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.
Thank you
@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!!!
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.
Awesome 🎉
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
Push it up to GitHub and send me a link. Very difficult to read it in comments.
why this guy don't have subcribers?
He’s an alien 👽!!
It's good for us, developers because if he had a good amount of subscribers the job market would have been more challenging.
Something very comforting about watching this expert repeatedly make the same typos I would make
Happens to all of us
I always wondered why I couldn't run a function as a callback for a click eventlistener with a given value.. why it wouldn't work until this video. Thank you very much!
Glad I could help!
Honestly this is the best video on the closures I’ve seen, thanks!
Thank you
That was awesome! Finally someone with straight and understandable explenation. Thanks a lot for this!
The Last example was insane🔥
🔥
Pretty sure it's also directly taken from MDN Webdocs under "Practical Closures"
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!! 🎉🎉
Thank you
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
@@tyv1383 I totally agree. These videos are really well explained. His presentation is also top notch.
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! : )
Thanks Vladislava!
Another great video! An ASYNC video would be a blessing!
Great suggestion!
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.
You are so welcome!
New Subscriber... Just loved your content...Want to gain more knowledge from your content... Keep uploading Best of luck Sir.........
Welcome aboard!
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 TH-cam to suggest your page to me
Thank you for the Teaching, very attention grabbing and visual... God bless you ❤❤
Thanks for taking the time to write 👍
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
Great explanation. I would add that variable value is long lived because closure variables are placed into heap memory and not the stack memory.
What does this mean exactly?
you are a great teacher . thanks for every video that's are provide javascript community. watching from Bangladesh 🇧🇩🇧🇩
Dude your editing among coding videos and explaining concepts is absolutely supreme! How can I be like you?
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!
Glad it was helpful!
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.
Thanks! I'll consider TS for future videos.
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.
I hear you
You are amazing teacher you deseve more subscribers👍👍
Thank you. With time subscribers will come 😉
Very underrated channel. Great videos bro. Keep doing it.
Thank you!
I am new to closures, but the thing I use most for it is either if I need a decorator, or a global memory archive. I like closures rather than func.attribute such as func._metaData. I would rather have a metaDataClosure to store and track metaData than a func._metaData. Closures are magical. Quite lovely.
This is your teaching is pretty good...keeep continue dude
Thanks!
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.
Haha that's hilarious. Thanks Sat!
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.
Thanks Faris
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
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
That’s awesome! I’m glad
Man! I am a fan now. Take love from Bangladesh ❤
Hello Bangladesh
What kind of human are u..watched hell lot of videos on this topic..but now am crystal clear
Awesome!
@@ColorCode-io sir, you have any plan to have complete. JS course?
@@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
@@ColorCode-io done signup... Waiting for First day first show
What a great channel!!! OMG, this is all i needed to understand some of the difficult stuff into JS. Thks for your content!
Great to hear!
This was a great video! When I started deving forever ago, I wish someone would have explained it to me like this 😆
Haha thanks dude
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! 😃
Thanks!
Great video. Thanks for making me have a deeper understanding of Closure
You're welcome :)
I hope your channel will grow, as I by watching your videos
Thank you ♥
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.
Awesome! 🤘
Thank you Sina!
You’re welcome
Loving how you present your video! I have to ask what them is that being used on your video? :)
It's just Chrome DevTools console in dark mode.
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.
Well done Sina !! Thanks for the explanation.
🙏
You deserve more subs mannn...
Keep up the quality Content
😀😀
Thanks
a really good video. you explained closure really well.
Thanks!
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
This is incredible! Thanks for this!
My pleasure!
Well explained. Worth the wait. Thank you.
Thanks dude
Love this series! Thank you King!
You’re welcome 🙏🏼
You have my respect. Great explanation.
Thank you 🙏
Excellent content and explanation. Subbed.
Thanks Chuck.
great video 🔥
waiting for eps 10
Will be coming soon
you are so great and also your explanation is so great. thank you so much.
🙏
this is awesome explanation! Can I cite you when they ask me about closures during an interview? ;)
You absolutely can!
TI ptsd is real 😭😭😭 thanks Sina 💯💯💯
😳😭
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. 🥰
excelent video. Your talking is unique
🙏
God, really a great video of explanation! Looking forward for more videos like this. Keep rocking 💥⚡
Thank you!
I love Your sense of humour in combination with explaining, thx And sub:)
Awesome, thank you!
Very good tutorial. That click handler example was too good. I used onClick in place of onclick and struggled for half an hour 😪
Thank you so much for the effort and great explanation..
Appreciate that .
Loay from Egypt!
Bravo! Very nice explanation
Ty!
thanks for the explanation
if you understand HOF and the functional paradigm in general, then closures are just a normal thing. For some reason the OOP world needs to make this complicated.
closures are glorified objects: the "outer" function is the constructor, the "name" field/property is the state, the "inner" function acts on that property. Return the "inner" from the "outer"? Now the "outer" is a HOF
"its all functions?"
"always has been"
awesome and clear explain, thank you so much,
can you explain Hoisting in js too😊
Good one. I'll do an episode on it.
Excelent tutorial !!! Thanks !!!
👍
great video, thanks a lot for the effort
Glad you liked it!
Thanks for your great explanation🙏 can you please have some c++ tutorials too??
Last time I wrote C++ was 20 years ago. Probably not the best person to teach it 😃
I wanted to ask at 15:50 does writing return inside clickhandler would work instead of creating function.
Yes it would
I was wondering the same thing. What's the difference? Why not just return the content of the outer function?
This video has an issue when playing on TH-cam via a smart TV, the audio cuts for no reason, other videos are fine but mostly this channel's videos audio get broken on tv
That's great my brother, thank you 🖤🔥
👍🎉
This channel rocks!
You rock too
Well Done
closures are variables and functions that are within the components function.
loved the explanation
Continue..appreciate your work
Thank you
Awesome video!
Sank you 🙏
Beautiful just Beautiful and Thank you too
Thank you
are you able to share another real world example of closures, or perhaps a common use case for closures ?
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.
can you explain advanced react hooks like useMemo etc. Btw great presentation
Good explanation 👍👍.
👍
Brate, svaka ti se dala i na kolena pala.
Mer30 Sina Jan! AALI BOOD!
👍
sina you're awesome
Roberto you’re awesome too!
a late discovery for me. thanks bro
Thanks for explaining this thang called closure... I love your hair.
Thanks!
You are the best!
🙏🏼
You are the best! 😍
You too
Amazing quality of video, well spoken and multiple examples. Definitely a like and subscribe from me!
Awesome!
An excellent tutorial on JS Closures. Thanks, Sina.
{2023-06-19}
👊👍