Closures - Part 5 of Functional Programming in JavaScript

hello you whippers Snappers what are we talking about today I'll let to be excuses speak for that just finish the last video enjoy your vacation why thank you I did very much observe my my slightly more tan face and since you're asking for suggestions how about closures to be us closures it is in case you're a new viewer dropping by this is a series where we learn functional programming using JavaScript you can watch the other episodes in this series by clicking there so what are closures in Java Script functions are not just functions they are also closures what that means is that the function body has access to variables that are defined outside the function body let me show you have a look at this code we are assigning a variable here uh called me uh and we're assigning it the value Bruce Wayne and we are then declaring a function for greet me which console logs hello me exclamation mark and then we call the read me function here here let's run that hello Bruce Wayne notice that we are not passing in an argument here we're just calling it without any argument we are directly referring to the me that is assigned outside of the function scope the reason that we can do this is that JavaScript functions like greet me are closures we cannot do this in languages that does not have support for closures in a language without support for closures we would have to pass the name as an argument to the function instead because such a language does not have access to the uh the outer scope of itself like that let me go back to the original I really like to stress here that greet me does really have access to the outer variable scope it does not snapshot the value of me uh at the time it is declared for instance if I reassign me to be Batman here and run it it will say hello Batman so greet me does not copy the value of me it actually reads whatever the variable is at that time from the outter scope and it will do this even if greet me was an asynchronous function being called from a say an Ajax callback or something like that greet me will remember this outer context that it's declaring even if greet me is called from a completely different part of the application or a different module it will still refer to this specific context you all being healthy Skeptics you're probably now asking yourself why is this useful what is the point of closures closures actually have quite a bit of use cases but I'm going to give you one that I think illustrates why closures are useful let's look at this function together it's called send requests and we start by assigning a request ID to a variable we then use uh just a uh the standard jQuery ajax function we call an Earl and when that is successful we alert the string request request ID return return I'm not going to run this I'm going to let your imaginations execute it but what will happen is that since all functions in JavaScript or closures including the call back to success it will have access to the request ID that we declared even though this call back is executed way later this really illustrates a good use of closures it's when you start a task and you want to specify something that happens when that task is done with stuff that is available to you when you start the task closures makes that easy and readable in a language that does not support closures you would probably have to have some kind of data object that you pass into the ax function which it in turn passed into success and if it didn't have that you would probably have to create some kind of request object with properties and stuff instead of just simply doing a function this kind of thing becomes sort of icky if you don't have closures we have talked a bit about what closures are I have showed you a practical example of why they are a good thing but closures is one of those things in JavaScript that just permeates the entire language there are more use cases than the one I showed you more than will fit into this video or even a second one closures is just one of those things that you have to use a lot on your own in your code for you to really internalize it however Milla having just great job JavaScript documentation overall has a super super good page on closures on their site and I have linked it down in the show notes you should go there and check those examples out and start using closures in your code to get a feel for it and that is it for today as usual I'd love to hear from you either down below or at mpj me on Twitter tell me what you thought about this this episode or ask me a random question or maybe tell me what you think that the next episode Monday should be about and speaking of that episode make sure you don't miss it subscribe by clicking my face in the corner until next Monday stay curious and subscribe