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.
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! : )
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.
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.
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.
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.
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!
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.
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.
@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!!!
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! 😃
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
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 RU-vid to suggest your page to me Thank you for the Teaching, very attention grabbing and visual... God bless you ❤❤
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. 🥰
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.
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.
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.
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
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.
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
@@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
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
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.
Damn bro, that last example of size is very good example. Also one doubt. Why cannot we just do this: onclick=() => clickhandler(12) provided the clickhandler function doesn't return the function but only document.body.sty...? Why is closures preferred over arrow function?
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
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.
