Javascript Closure tutorial ( Closures Explained )

What are closures in javaScript and how and where to use them.

So what is closure in javascript?
"whenever you declare a function inside another function, the inside function(s) is/are recreated again each time the outside function is called"

"Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure 'remembers' the environment in which it was created."
#JavaScript #closures #lexicalScope
*My Udemy Courses
*couponCode*=TECHSITH-9.99

Follow me for technology updates

Help me translate this video.

[KnomoSeikei]

"Closures are nothing but FUNCTIONS WITH PRESERVED DATA", I'll never forget this. Thanks!

[mazdysoraya]

It is much simpler, and very easy to understand. I've realized that people are confused about closures because they want to understand HOW CLOSURES WORK by applying NORMAL function BEHAVIOR MODEL (Many tutorials does not help with their explanations and examples, so its not that you are not smart ). But closures does not work like normal functions. Why not learn how do they work instead? We've all learned NORMAL function behavior, that is when you executing normal function, all variables inside are first initialized, used, then when function has finished its execution VARIABLES are DESTROYED. So that is normal function behavior.Simple, right? We all know that, but - Closures does not work like that. So what is closure then? When you have function inside a function it is AUTOMATICALLY a CLOSURE. What is the property of the closures?There is only one that you need to take home and understand! Again, in NORMAL FUNCTION BEHAVIOR: After function has finished its execution, variables are destroyed. Instead, When you have FUNCTION inside a FUNCTION, we now know it is automatically a CLOSURE. CLOSURE has this PROPERTY: When Your engine sees function inside a function, it WILL NOT DESTROY data, data will remain in memory. Imagine like your engine thinks oh wait, i have function inside a function, so this nice dude wants me NOT TO DESTROY variables. So we can access them even after function has finished execution. What is use of that property? Consider following EXAMPLE: imagine you have function inside function ( closure ). You have OUTER FUNCTION with COUNTER set to 0. Then in inner function, because we can access outer function variables we want to do the following: Clicking on a button we will increment counter. What would happen without closure properties, i.e. if they would behave like normal function? Without closure behavior, when we click on a button, it will increment counter to 1 and it will remain 1 no matter how many times we click button. Why? Because, counter value is lost, it is lost because this will be WORKFLOW: 1. OUTER FUNCTION sets counter to 0. 2. Inner function increments counter so now counter is 1. 3. We come to the end of the outer function, so basically we finished with executing a function, so in that regard variables are destroyed in our case counter = 1 is destroyed. Then we click again, it will repeat process, so set to 0, then inner increments to 1, again we come to the end of the function, puf counter is again destroyed from memory. so that is why we always see 1. Then remember, this would be normal behavior without closures. But when engine see function inside function it is automatically a closure, and again to carve in your brains, variables would not be destroyed after function has finished its execution. So counter set to 1 will not be destroyed it will be stored in memory even after outer function has finished its execution. SO REAL WORKFLOW with CLOSURES is this: 1. OUTER FUNCTION sets variable counter to "0". 2. Inner function access that variable and increments it so in memory is COUNTER = 1. 3. Function has finished its execution, BUT being a closure variable is still in memory so not destroyed. Now we have in memory COUNTER =1, now upon clicking the button second time, button engine will know it is closure and will use existing variable in memory ( counter = 1 ), so next time will increment to COUNTER=2, 3, ..NOTE ALSO, all callback functions are automatically closures as well!

[suryan]

"Closures are nothing but FUNCTIONS WITH PRESERVED DATA", I'll never forget this. Thanks a lot! Awesome video.

[samaugust]

Hey, you're great. You know how to talk to people at the human level and reach them. And I love the graphics and everything else which assists in the overall visual representation. Just wanted to let you know, you are really offering value to the world with your videos and I appreciate it. Thanks. : )

[kushalatreya]

great video. I cracked the job interview because of this video, I was like: I don't know why people make a big deal about closure, it is just a function which has knowledge about its environment yada yada yada.

[brucelee]

"Todey we learn about closures", gonna send my ex this for the closure she never gave me.

[PhoenixRisingFromAshes]

"Jahapana tu si great ho tofa kabul of to u sir for explanning these in simplest of terms ever possible.

[seandeg]

4 Years later and this video is still valid and the best on YT to learn closures. Thanks @techsith!

[arnobchowdhury]

Watched the video, did not understand the anything. Went through the comment section, got more confused. Went to the toilet and suddenly everything started to make sense. And now I am thankful to everyone. The video is GREAT and everyone in this comment section is also very generous. Thanks everyone. Faith on humanity restored.

[ShadowsMasquerade]

2:54 LMAO would love to see the interviewer's reaction

[neolamanite]

You are awesome. Now I finally get closure. Thanks

[mr.mr.]

Seriously, I have watched countless tutorials on this subject and it frustrated me so much that no one could explain closures as simple as this guy did. Finally it clicks thanks to this tutorial. CLOSURES ARE FUNCTIONS WITH PRESERVED DATA!!! Why don't any other instructors keep it as simple as that?!?! Thanks for this tutorial. Huge help!

[williamyang]

A closure is an inner function that has access to the outer function's variables. Obviously the inner function has access to its own function scope ('local' variables defined between its braces), and it has access to the outer function's variables, which are Closures, and it has access to the global variables.

[sho_carter]

Thanks for the clarity of this. This actually taught me more than I thought I knew about closures.

[bollvigblack]

anytime I don't understand something i immediately start to looking for you man. your simplicity and way u explain anything is unmatched

[hailegigar]

I have been self-learning python and javascript for a couple of years and come across a host of online tutors on the subjects. Undoubtedly, this is the best tutor I have ever seen. His methodology is practical, to-the-point, simple and meaningful! He even has a great personality - - - he genuinely shares his knowledge and skills. Some tutors like to use complicated demos and rather make the coding boring . . . they sound like some of the German idealistic philosophers in the 18th century. If you guys have a plan to consume online coding classes, do not waste your time . . .just go jump and comfortably land yourself on his lectures.

[SheshagiriPai]

You are blessed with the ability to teach. Keep em coming. Simply awesome. Thanks.

[MrHarumakiSensei]

To sum up my question:

Why is the first time addTo is called, the argument goes into the variable 'passed' but the second time the argument goes into 'inner'?


var addThree = new addTo(3); //3 is assigned to the variable 'passed' here

console.log(addThree(1)); //1 is assigned to the variable 'inner' here.

[dhruvjain]

best explanation for closures, you made it look so simple . people often confuse others while explaining . you know how to teach

[kevinbiebie]

Man, you're a true SITH JS warrior! This is the 5th video I watch on Closures and I FINALLY GOT IT! Liking and subscribing right now.... thanks a lot!