JavaScript closures! 🎉💻

@satk2554

2 жыл бұрын

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

@ColorCodeio

2 жыл бұрын

@@satk2554 Most likely this weekend.

@DevCoder

Жыл бұрын

can you explain Hoisting in js too😊

@ColorCodeio

Жыл бұрын

@@DevCoder 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!

@ColorCodeio

Жыл бұрын

You’re welcome! 😀

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.

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

4 ай бұрын

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

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

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

@ColorCodeio

5 ай бұрын

😀

why this guy don't have subcribers?

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

2 жыл бұрын

Thanks Vladislava!

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

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

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

7 ай бұрын

School for fool @@ColorCodeio

@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!!!

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

2 жыл бұрын

Thank you

@tyv1383

10 ай бұрын

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

10 ай бұрын

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

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

@ColorCodeio

2 жыл бұрын

Thank you. Made my day :)

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.

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

9 ай бұрын

You are so welcome!

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

@ColorCodeio

2 жыл бұрын

Great to hear!

The Last example was insane🔥

@ColorCodeio

4 ай бұрын

🔥

@xViolaine

3 ай бұрын

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

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

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!

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

@ColorCodeio

10 ай бұрын

Thanks!

Love this series! Thank you King!

@ColorCodeio

2 жыл бұрын

You’re welcome 🙏🏼

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

@ColorCodeio

2 жыл бұрын

Thank you

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

@ColorCodeio

4 ай бұрын

Thanks

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

@ColorCodeio

2 жыл бұрын

Great suggestion!

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

@ColorCodeio

2 жыл бұрын

You're welcome :)

The best explanation of closures on KZread i have ever seen

@ColorCodeio

Жыл бұрын

👍

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

Bravo! Very nice explanation

@ColorCodeio

7 ай бұрын

Ty!

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

5 ай бұрын

Awesome 🎉

Well explained. Worth the wait. Thank you.

@ColorCodeio

2 жыл бұрын

Thanks dude

This is incredible! Thanks for this!

@ColorCodeio

10 ай бұрын

My pleasure!

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

5 ай бұрын

Thanks!

Well Done

You are amazing teacher you deseve more subscribers👍👍

@ColorCodeio

2 жыл бұрын

Thank you. With time subscribers will come 😉

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

@ColorCodeio

Жыл бұрын

Welcome aboard!

thanks for the explanation

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.

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.

loved the explanation

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

@ColorCodeio

Жыл бұрын

🙏

Excellent content and explanation. Subbed.

@ColorCodeio

Жыл бұрын

Thanks Chuck.

You have my respect. Great explanation.

@ColorCodeio

2 жыл бұрын

Thank you 🙏

Well done Sina !! Thanks for the explanation.

@ColorCodeio

Жыл бұрын

🙏

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

great video 🔥 waiting for eps 10

@ColorCodeio

2 жыл бұрын

Will be coming soon

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

2 жыл бұрын

Thanks! I'll consider TS for future videos.

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

2 жыл бұрын

That’s awesome! I’m glad

Excelent tutorial !!! Thanks !!!

@ColorCodeio

Жыл бұрын

👍

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

@ColorCodeio

2 жыл бұрын

Thank you!

Thank you Sina!

@ColorCodeio

5 ай бұрын

You’re welcome

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

@ColorCodeio

4 ай бұрын

Hello Bangladesh

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.

a really good video. you explained closure really well.

@ColorCodeio

Жыл бұрын

Thanks!

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. 🥰

great video, thanks a lot for the effort

@ColorCodeio

Жыл бұрын

Glad you liked it!

GREAT!

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

@ColorCodeio

Жыл бұрын

Thank you ♥

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

9 ай бұрын

I hear you

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?

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

@ColorCodeio

2 жыл бұрын

It's just Chrome DevTools console in dark mode.

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

@ColorCodeio

2 жыл бұрын

Haha thanks dude

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

That's great my brother, thank you 🖤🔥

@ColorCodeio

2 жыл бұрын

👍🎉

This channel rocks!

@ColorCodeio

10 ай бұрын

You rock too

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

@ColorCodeio

4 ай бұрын

😳😭

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! 🤘

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

@ColorCodeio

2 жыл бұрын

Thank you!

Awesome video!

@ColorCodeio

2 жыл бұрын

Sank you 🙏

Beautiful just Beautiful and Thank you too

@ColorCodeio

2 жыл бұрын

Thank you

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

2 жыл бұрын

Haha that's hilarious. Thanks Sat!

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

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

@ColorCodeio

Жыл бұрын

Awesome, thank you!

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 KZread to suggest your page to me Thank you for the Teaching, very attention grabbing and visual... God bless you ❤❤

@ColorCodeio

10 ай бұрын

Thanks for taking the time to write 👍

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

@ColorCodeio

7 ай бұрын

Yes it would

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

You are the best! 😍

@ColorCodeio

10 ай бұрын

You too

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.

You are the best!

@ColorCodeio

2 жыл бұрын

🙏🏼

You are the best 🎉🎉🎉🎉

@ColorCodeio

7 ай бұрын

So are you

excelent video. Your talking is unique

@ColorCodeio

10 ай бұрын

🙏

Good explanation 👍👍.

@ColorCodeio

2 жыл бұрын

👍

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

@ColorCodeio

Жыл бұрын

Awesome!

a late discovery for me. thanks bro

Thank you a lot

@ColorCodeio

4 ай бұрын

👍

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

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? ....

thanks

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

@ColorCodeio

11 ай бұрын

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

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

sina you're awesome

@ColorCodeio

Жыл бұрын

Roberto you’re awesome too!

Awesome :)

@ColorCodeio

2 жыл бұрын

Thank you!

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

perfect

super!! explained l

Brate, svaka ti se dala i na kolena pala.

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

@ColorCodeio

4 ай бұрын

Thanks!

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.

I love this vidoe 😍😍

@ColorCodeio

Жыл бұрын

This video loves you back

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