Learn Closures In 7 Minutes
ฝัง
- เผยแพร่เมื่อ 2 ธ.ค. 2019
- The most infamous interview question for JavaScript has got to be explaining closures. Because of this it may seem that closures are a complex topic, but in reality the idea of closures is actually pretty simple. All you need to know about closures is they they are a mechanism in JavaScript for handling variable scope. In this video I explain in depth exactly what closures are, how to use them, and why they are important.
🧠 Concepts Covered:
- What closures are
- How closures work in JavaScript
- Why closures are important
- When to use closures
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#Closures #WDS #JavaScript
SUMMARY: Closure i s "when you have a function defined inside of another function, that inner function has access to the variables and scope of the outer function even if the outer function finishes executing and those variables are no longer accessible outside of that function."
Ha-ha! A truly brilliant explanation by Kyle!
Thank you
Check out this too - th-cam.com/video/W7j1jcOoMt0/w-d-xo.html
Now I finally understand closures. Thanks for this summary.
You should get Nobel price
**If you are confused about his code example, please see my 3 step explanation:**
1. The outerFunction('outside') is called immediately when it is assigned to the variable "newFunction". (That's how it works when a function is assigned to a variable with (), if you didn't know this part, you would very confused).
2. Upon being called, outerFunction returns the function "innerFunction(innerVariable") which re-reassigns our variable "newFunction" to be InnerFunction(innerVariable) instead of outerFunction(outerVariable).
3. Then by calling our variable as newFunction('inside') we are calling innerFunction('inside') which runs the console.log code. The closure is that innerFunction remembers and has access to the outerVariable parameter we originally set with outerFunction('outside'). Thus it is able to console.log both 'outside' and 'inside' even though it was called with just 'inside'.
If this helped you please thumbs up so others can see!
thanks... it took a while to understand this concept and your explanation helps me re-confirm that what I understand is true.
Thanks man 👍👍
Thanks brother it really helped me
Thanks, I was so confused when I saw that.
great explanation,thank you!
it's been 70 years and I still don't understand closures
You are not alone.
Jump to 6:27
Haha okay one tip for you. If you are smart enough you would understand. Javascipt variables do not holds the values they rather holds the references to the physical memory slots in which values are contained. When variables are returned from a function , it forms a closures because the function is not returning the variables/values, the function is rather returning the references to memory slots .. That's it
try having a look at this once: th-cam.com/video/ZA3ogWqNNPg/w-d-xo.html
but javascript is only 23 or 24 yrs old
I was confused all along but your last sentence saved me 😁
Same bro i got confused too
Same here
same
That last sentence saved me too.
You saved me lok
10-second summary: 6:28
OK, i am taking it since i don't understand anything else
thank you lol
I think I FINALLY understand closures. In fact, I found a good reason to use one today in my project. TLDR; When you need to pass a function with no parameters, but the function you want to pass has parameters. BAM, create a closure by putting the variables/parameters you need in the outer function and return a function with no parameters (just remember that returned function has access to the outer function parameters, even after it's done executing).
It’s just a child function having access to its parents function
There's more to it. That's actually lexical scope. Lexical scope comes into play in the concept of Closures when that lexical scope is 'closed' out, hence the term closure. A Closure is when you still have access to a lexical scope that has been closed and the values should have been garbage collected are still available to your closure / function that is still accessing them.
@@SquaredbyX to see if I got it right, its like the inner scope creates a copy of the outer one for "personal use", right?
@@SquaredbyX You really hit it home with that explanation. Thank you!
So what the use of the closure then?
@@kobe248ryant nothing just use the parent scope in the child scope
Finally I funckin' got it. Thanks Kyle. I found myself coming back to your channel more and more when I need to clarify/understand some webdev-related stuff. Will definitely buy at least one of your courses. Keep up the good work.
i always come back to this channel whenever i need a clear , simple and straight to the point explanation
Closures are such an interesting topic that I always watch anyone or everyone coming up with an explanation for the same. This was one of the best explanations that I have come across.
Thank you!
*personal note*
newFunction call = (outerFunction + calling it).
outerFunction executes, returning innerFunction while passing in "outside" as part of the accessible scope.
newFunction then passes "inside" to the now returned innerFunction, calling it and completing the execution.
For anyone reading, I have no idea if I'm right but this makes sense to me rn.
Analogy note: newFunction is like the first car key turn, it activates the starter (outerFunction) which primes the engine by passing in "outside" and returning innerFunction as ready to ignite. The second turn is newFunction passing in "inside" which sends fuel, igniting the engine (calling innerFunction)
Thank you, Kyle. Your explanation is so good that other people's closure videos starting making sense to me too.
You simplify web development so successfully that I always benefit from your channel since I started learning JavaScript!
I am so glad I could help!
Most straight forward easy to understand explanation I've seen. Thanks buddy.
This closure topic was so difficult to understand at first.
I've read it on multiple sites but this video by Kyle is really awesome and easy to understand.
Thank you Kyle!
Thanks for that Axios example, which no one ever has mentioned in their closure tutorial. We were using closures without even realizing it.
Kyle you are awesome! Thank you for this! I’m constantly coming to your videos! Trying to learn as much as I can but really trying to understand how things work!
You tried to simplify the concept from the start and made your point clear. Thank you.
Excelent explanation, thank you a lot, I was having trouble trying to understand Closures, and this video fit like a glove!
The last example was amazing! Thank you for taking the time to make this!!
Great video. I watched this a month before my interview but forgot the concept so I recommend y'all watch it again every now and then
That was simple, because you made me understand it in a simpler way. Thanks Kyle. 😊
Man, congrats about your videos. I passed in a interview using your videos about React to learn how to build an app and now I'm using again. Continue this job.
Closures allow functions to access variable values, declared in another (parent) function, even after the parent function has finished it's execution.
In js, the variables within a function are accessible only within itself and only for as long as the function is executing.
You can understand this, by creating a new variable and assigning the parent function to that variable. Then do 'console.dir(new variable).
Try below example :
const add = function(){
let num = 1;
return function() {
num++
return num;
}
}
const addFunc = add()
console.dir(addFunc)
in the console > click on 'f anonymous()' > click on 'scopes' > click on 'closure'
In the above example, the addFunc function is declared in the global scope. Hence, it should not be able to access the variable in the add function, because variables can only be accessed within the scope and and while the scope still exists (as long as the function is running). But because closure preserves the value of the variable even after the parent function (add) has finished execution, the other functions (addFunc) that are that are using the parent function are able to access the variable.
Hope that helps. :)
The best explanation on TH-cam, thank you very much. I don't know why ppl keep complaining about not understanding this.
i have tried so many videos on youtube but none of them explained in the way you did, thank you so much for a nice video.
Kyle, thanks to your videos I learned not only JS but English too.
I don't know how but you clarified and simplified all info in your videos so well, hope so youtube algorithm make you famous, good luck :)
Thank you so much! I'm really glad I can help.
i love you and your channel i hadn't seen anyone explaining js closures as clear as you
Really good content man. Thanks for explaining it clear and concise!
This is great, appreciate you not making it more complicated than it needs to be. Thanks!
You are a legend, always glad to come back to these videos and brush up the fundamentals again
You made this concept very easy. Thank you Kyle.
Thanks for this! I watched this after a lecture and watching a few other videos that confused me... I finally got it!
Great job buddy, I like the sequence you presented it in: simple example, better example and then use case.
I watched many videos on closures but everybody trying to explain too much and somewhere lose the real thing. Your example and explanation are good. I got the concept. thank you for this video.
Thank you very much Kyle for the nice explanation. Closure was not clear exactly to me until I watched your video, That makes the understanding more easier
Explained very well and a VERY good example! Thanks!
You make everything super easy..! Thanks a lot.
This explanation was great! Thankyou for the video.
6:28 after watching the video once, repeat this for 5 times and you're good. Once more, thank you Kyle :)
5:07 - innerfunction() will only have access to those variables of outerfunction() which innerfunction() wants to use it. , when we do console.dir( newFunction ) , we can see [ [Scopes] ] Array , which has Closure Object with the variables that would be used by innerfunction() only , not all variables of outerfunction
Very clear information. Thanks for sharing. Was reading many sources, but none were so clear and understandable. Can you please make a video on 'JS event bubbling'
I am on my way to understand this.
Thanks a lot for helping me, i think i cant understand this at 100%, but i will not give up.
Im learning a lot with you and your youtube channel.
You got a new subscriber here.
Cheers! And thanks again!
So well explained! I'm fan of your videos since saturday! Thank you!! May be one thing missing in this one is to explain what happens when an outside variable gets modified inside a function (because i thinks it's not like php where you have to pass it as a reference and all that). Anyway, you rule. One of the best channels for learning! And the short video distribution is awesome to watch them at any time of the day.
Thank you so much. I have a video on pass by reference vs pass by value in JS that you can checkout that explains exactly this concept.
This made closures so simple. Thanks!
Ooo boy, this helped me understand the concept. Thanks !!
great explanation ........ keep on uploading more concepts videos...
You are gem to people who want to learn web development on own.....
Kyle is good when it comes to explanation. Thank you
Thank you. I think I understood. I was expecting closures to be something more "visible", a specific keyword, or a line where I could comment next to it. But if I understood it right, it's more like a concept, like a behavior of an inner function.
i was learning on Udemy and i got some trouble to understand ...after watching this video it was easy peasy to understand ... thanks so much
That was very helpful! Thank you Kyle :)
Watched 1 minute of your video and understood closures. Thanks!
The first example you gave is not due to closure but due to scope chaining. Closures come in play when the execution context has finished but the variables still stay around. In first example we still have global execution context. But thanks for video always learn something new everyday.
right. this is what i was thinking
Nice!
Some useful implementations and examples would be great for part 2 :)
Good explanation mate, I subscribed!. tip: You really should start using the semicolons while writing javascript code, and avoid using anonymous functions, you should name those functions even if they are IIFEs or arrow functions, it makes debugging easier since the function name shows up on the errors later..
I learn about closures on MDN, highly recommended!
Finally, I am able to understand closure. Thanks!!!
Great explanation, thanks bud!
Thx for such a great explanation!
Nicely explained..! Thank You ..!
super and clear explanation. Thank you
You are awsome. clear n crisp explaination.
After 10 thousand videos, I was finally able to wrap my head around this passing of param straight to the inner function and not to the outer one, starting at: 3:48
Thank you so much Kyle for your outstanding explanation. I have a small comment, I think closures have different behaviors when you are using var and let right ?
Hey dude !!! Awesome and crisp explanation......
awesome... I finally understood what closure is
Thank You So Much for this wonderful video..........🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻
This is very helpful. Thank you
Hi bro! Thanks for all the easy-understanding videos, and could you please make a video like ?
Great explanation!
Thanks man, really helpful.
Read atleast 10 articles to understand closures.. but this one saved me
Today I had an interview and the interviewer asked me about closure. I did not give a proper answer and now I am here :).
very simple superb... thanks
Thanks for the explanation.
I do hit the like button every single video of you! btw, please make some videos about deployment, I really confused about some extra files like .editorconfig, Procfile, Yarnrc.yml, config files..etc. I'm looking forward to your videos. Fan from Vietnam !
That was a good explanation..nice
2:34." When most people think of closures they think of function inside a function." That has been the problem for me. Thanks for the clarification
Great video! really simplifies the concept. What I still can't quite understand is how calling newFunction sets the inner variable. :/
very nice explanation.
Summed up great at the end.
thanks it was really helpful
Thanks bro.. I understood.
Thank you bro!
kyle resisted the terminator, now he changed the mission to simply web dev!!
Tomorrow i have an interview. I was thinking what i don't understand or know that well and i was searching right now to see what i can find. Closures were the first item on the list. Are you reading your subscribers minds? Thank you for this tutorial. Other items on list are call&apply and bind.
Good luck with the interview!
Thankyou so much!
Loving this community
Great video! Exactly! Why make it so complicated. An inner function has access to the outer functions variables and scope even after it has been called.
Watched the vid 3 times and still not getting it. I feel stupid
No, don't feel stupid. It's hard to wrap your head around closures. From my experience so far, not much programming is intuitive. The takeaway at 6:28 is what you should consider imo
read the book of kylie Simpson - you don't know javascript
Try looking at this once: th-cam.com/video/ZA3ogWqNNPg/w-d-xo.html
I hope it will help.
th-cam.com/video/nG4tqI-9K3o/w-d-xo.html
Thats because the man in the video himself is confused
Man,why are you not getting views,so underrated..
Thank you sensei
Very nice!
In other languages, the global variables are accessible everywhere.
Variables in parent functions are accessible to inner functions.
Variables in parent classes are accessible in the class functions as well as in child classes and their functions. (if set up as public or protected).
Thanks Kyle!
The thing that is very confusing with this example is that the outer function RETURNS a function. I needed a long time to understand it but finally did.
After the statement: const newFunction = outerFunction('outside') the VALUE of newFunctio will be what is inside the RETURN clause, so, de VALUE of "newFunction" will be:
"function innerFunction(innerVariable) {
....console.log('outer variable', 'outside');
....console.log('inner variable', innerVariable);
}
The confusing part is that when the function is returned, the part that logs "innerVariable", no longer logs innerVariable, it logs 'outside' instead because it is what has ben passed as parameter when the outer function was called.
So, when you execute newFunction('inner') you are executing the function that has been returned the first time.
So you are basically executing this:
newFunction('inner'){
....console.log('outer varaible', 'outside'); //this 'outside' is a literal value (not a variable) assigned when newFunction was assigned
....console.log('inner variable', 'inner'); //this 'inner' was passed as a parameter when calling newFunction('inner');
}
I hope this calrifies.
The whole closures thing is not that complicated. Basically, you can always access variables/functions/etc that are in a higher scope than you are standing. You could see it as if the function/variable/etc is LESS INDENTED (further to the left) in your code, you can access it.
I am going to download all your video and tranform them into mp3 audios and listen to them to fall asleep at every night. I hope you don't mind.
I finally understand it after your explanation. You should do a udemy course
Thank You!
Wow I think this just clicked for me. Took me watching this a few times but the inner/outer variables seem to have helped.
The confused look in the thumbnail 🤣