Learn Closures In 7 Minutes

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

[@HK-th3tu]

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

[@vladislavglad6596]

Ha-ha! A truly brilliant explanation by Kyle!

[@angelamariasuarezparra7872]

Thank you

[@ProgrammingwithRakesh]

Check out this too - kzbin.info/www/bejne/jWjNYp2ZhNSAqpI

[@adeelbukhari]

Now I finally understand closures. Thanks for this summary.

[@jamessmith_321]

You should get Nobel price

[@scottj6296]

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

[@free2idol1]

thanks... it took a while to understand this concept and your explanation helps me re-confirm that what I understand is true.

[@BibeshManandhar]

Thanks man 👍👍

[@tylercode2207]

Thanks brother it really helped me

[@Corvinade]

Thanks, I was so confused when I saw that.

[@xiaotutu0802]

great explanation,thank you!

[@CraigClayton-bk3ze]

it's been 70 years and I still don't understand closures

[@paujoan401]

You are not alone.

[@surfinbird71]

Jump to 6:27

[@therealilyaskhan]

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

[@thedevelopergirl]

try having a look at this once: kzbin.info/www/bejne/kHKWoJqNprOBhsk

[@thinkingaloud7925]

but javascript is only 23 or 24 yrs old

[@canvaapplessons1224]

I was confused all along but your last sentence saved me 😁

[@AbhaySingh-dd9xc]

Same bro i got confused too

[@dhanyakumar8965]

Same here

[@navrajsandhu8168]

same

[@centrumsaiyan7623]

That last sentence saved me too.

[@SENPAI-mi6sz]

You saved me lok

[@doniaelfouly4142]

i always come back to this channel whenever i need a clear , simple and straight to the point explanation

[@kristofbalinth2071]

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.

[@techuchiha6510]

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.

[@WebDevSimplified]

Thank you!

[@kuei-chinhuang815]

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!

[@WebDevSimplified]

I am so glad I could help!

[@Amey_G18]

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!

[@ganeshbabu6458]

Thanks for that Axios example, which no one ever has mentioned in their closure tutorial. We were using closures without even realizing it.

[@marcotorres899]

The last example was amazing! Thank you for taking the time to make this!!

[@MrTubs987]

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

[@christopherortega6257]

Most straight forward easy to understand explanation I've seen. Thanks buddy.

[@Zonai_Guy]

It’s just a child function having access to its parents function

[@SquaredbyX]

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.

[@andreadg5429]

@@SquaredbyX to see if I got it right, its like the inner scope creates a copy of the outer one for "personal use", right?

[@geralt36]

@@SquaredbyX You really hit it home with that explanation. Thank you!

[@kobe248ryant]

So what the use of the closure then?

[@Zonai_Guy]

@@kobe248ryant nothing just use the parent scope in the child scope

[@aashayamballi]

That was simple, because you made me understand it in a simpler way. Thanks Kyle. 😊

[@zachwhite8054]

10-second summary: 6:28

[@atulsharma706]

OK, i am taking it since i don't understand anything else

[@stills2359]

thank you lol

[@bohdanartemenko]

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 :)

[@WebDevSimplified]

Thank you so much! I'm really glad I can help.

[@snake1625b]

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

[@ahlen10]

You tried to simplify the concept from the start and made your point clear. Thank you.

[@dsvhs93]

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!

[@lucasoliveira-xs5yh]

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.

[@viniciusborgesdelima2519]

Excelent explanation, thank you a lot, I was having trouble trying to understand Closures, and this video fit like a glove!

[@GuitarreroDaniel]

The best explanation on KZbin, thank you very much. I don't know why ppl keep complaining about not understanding this.

[@iam-Inder]

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.

[@sledge9763]

This is great, appreciate you not making it more complicated than it needs to be. Thanks!

[@brownboyintokyo7368]

You are a legend, always glad to come back to these videos and brush up the fundamentals again

[@reidwilliamson6477]

Really good content man. Thanks for explaining it clear and concise!

[@mubashirali6835]

You made this concept very easy. Thank you Kyle.

[@lone-warrior-13]

i love you and your channel i hadn't seen anyone explaining js closures as clear as you

[@BusinessDevelopmentSolution]

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.

[@elhamsalamat772]

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

[@Life.Love.Locs.]

Thanks for this! I watched this after a lecture and watching a few other videos that confused me... I finally got it!

[@TheFinalsTV]

*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)

[@pardeepporia5367]

Great job buddy, I like the sequence you presented it in: simple example, better example and then use case.

[@athira151292]

This explanation was great! Thankyou for the video.

[@sebiporini]

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!

[@noideaofhowcallme]

Explained very well and a VERY good example! Thanks!

[@draicor]

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

[@atulkamble557]

You make everything super easy..! Thanks a lot.

[@mruduladdipalli5417]

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

[@emekatimothyiloba699]

Kyle is good when it comes to explanation. Thank you

[@s5006]

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

[@thebrijpatel]

Ooo boy, this helped me understand the concept. Thanks !!

[@Anne-kz4fi]

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.

[@lakshmi-dev]

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'

[@RodrigoButta]

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.

[@WebDevSimplified]

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.

[@dopetag]

Nice! Some useful implementations and examples would be great for part 2 :)

[@johnson554671]

Thx for such a great explanation!

[@melissamoloney6312]

That was very helpful! Thank you Kyle :)

[@VishalSharma-fm6nr]

This made closures so simple. Thanks!

[@cristianbonomo5042]

Watched 1 minute of your video and understood closures. Thanks!

[@iarchetype]

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

[@zerosecond9739]

great explanation ........ keep on uploading more concepts videos... You are gem to people who want to learn web development on own.....

[@helloworld4475]

Hi bro! Thanks for all the easy-understanding videos, and could you please make a video like ?

[@milindkhadse556]

This is very helpful. Thank you

[@lefosg]

6:28 after watching the video once, repeat this for 5 times and you're good. Once more, thank you Kyle :)

[@abdullatheefr2286]

You are awsome. clear n crisp explaination.

[@mikedelta658]

Finally, I am able to understand closure. Thanks!!!

[@harrygill6169]

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.

[@ohiwantyoutobelieve]

right. this is what i was thinking

[@syedibadulhassan9307]

Great explanation, thanks bud!

[@_tu_shark]

Nicely explained..! Thank You ..!

[@Ravipenugonda]

super and clear explanation. Thank you

[@abdelrahmanmagdy3706]

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 ?

[@hargunbeersingh8918]

I learn about closures on MDN, highly recommended!

[@iiilililiklku]

awesome... I finally understood what closure is

[@nickfan7867]

Thanks for the explanation.

[@kolyxix]

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

[@stith_pragya]

Thank You So Much for this wonderful video..........🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻

[@naoko1927]

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 !

[@prathameshmali3888]

Thanks man, really helpful.

[@zarakikenpachi1773]

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. :)

[@madhanmanick3455]

Hey dude !!! Awesome and crisp explanation......

[@pavloshchur3684]

Great explanation!

[@kareemmoro2935]

That was a good explanation..nice

[@dinarboyo3658]

thanks it was really helpful

[@billyjayamunga]

Great video! really simplifies the concept. What I still can't quite understand is how calling newFunction sets the inner variable. :/

[@srkvocals]

very simple superb... thanks

[@haraldcarlsten6238]

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.

[@dean6046]

Thank you bro!

[@dayibdesign1686]

kyle resisted the terminator, now he changed the mission to simply web dev!!

[@sankalparora9261]

Summed up great at the end.

[@harishharidas8969]

Read atleast 10 articles to understand closures.. but this one saved me

[@iHidden1]

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.

[@ruslan2676]

Good luck with the interview!

[@BruceArmstrong09121997]

Loving this community

[@asadbilal591]

Man,why are you not getting views,so underrated..

[@NirmalGhosh-yn7ov]

Thanks bro.. I understood.

[@KajalMajumder]

very nice explanation.

[@saputrauta09]

Thankyou so much!

[@Farrukhw]

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

[@filip23128]

Thanks Kyle!

[@Agustin-jo8mv]

Wow I think this just clicked for me. Took me watching this a few times but the inner/outer variables seem to have helped.

[@muhammadinaammunir6761]

Today I had an interview and the interviewer asked me about closure. I did not give a proper answer and now I am here :).

[@abdelrahman5094]

best explanation ever

[@heyyou494]

Thank you sensei

[@JamesJon1187]

Thank You!

[@kemal_ozturk]

The confused look in the thumbnail 🤣

[@shivarammuthukumaraswamy7164]

Thanks a ton man

[@naruto.boruto_edt]

It's being 2y and this is still helpful thanks

[@hughclarke8504]

Question, when and why would you use closures? I'm new to coding and I am learning closures now.

[@jjjj5452]

I finally understand it after your explanation. You should do a udemy course