Learn Closures In 7 Minutes

hello everyone in today's video I'm gonna be explaining to you exactly what closures are and you'll be surprised how simple they are to understand once you wrap your head around the idea so let's get started now welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so if that sounds interesting make sure you subscribe to the channel for more videos just like this one and now to get started I just have really simple JavaScript on the left side here and then the output showing up on the right-hand side and this is very simple code we have a variable called my name a function called print name which prints out our name whenever we call it and then we're calling that function and as you can see we're getting Kyle printed out over here on the side and what you probably don't realize is this is using closures this entire thing is one giant closure and that's because most of the time when you run code in other languages for example you cannot access variables outside of a function inside of that function that is just not always possible in other languages but it is possible in JavaScript and it is what we call a closure so this variable that is external to this function is actually available internally inside this function this is a global variable essentially and it's available inside this function and the way closures work in JavaScript is that every scope so for example we have the entire JavaScript file that is one scope and then our function is another scope so every scope has access to everything outside of its scope so our function has an outer scope of our entire file so it has access to everything inside the outer file and one thing that's really interesting if we change this here to a variable that can be renamed so we have our name as Kyle up here and we change our name down here we'll just say that the new name is going to be Joey and we save that you can see this now prints out Joey and so it's not just taking the name that is defined when the function is defined it's actually taking the current live value of that name it goes for example if we have the name here and then we come down here change - something else will change it decayed and then we print out the name one more time you can see that it says Joey and then Kate it's constantly going with whatever the most recent value of that variable is and now this right here is not the most useful way that you can use closures I mean it obviously is a way you can use them but when most people think of closers they think of functions inside of other functions so let me jump to another example now so here is the more common use case of closures where most people talk about closures and as you can see we have a function here called outer function and that function is returning another function inside of it called inner function and as you can see down here we're calling outer function with the variable outside so now we are getting a new function and then lastly we're calling that new function with the variable inside so what's happening is that when we first call this outer function we have this outer variable which we set to outside which gets set and then we have this function that gets returned here and the reason we're able to access this outer variable inside of this function is because of closures and now it's kind of weird when you think about it at first because this outer function runs and this outer variable is only available inside this function but this function is done executing for example if we just remove this code here you can see nothing prints out and that's because we call this outer function right here and it executes all of the code and then it's done executing and this outer variable is no longer accessible for example I can't log out the outer variable if I try to it's just gonna give me an error as you can see it doesn't actually exist so how is the inner function able to access this outer variable even after it's done being executed because the outer variable has gone out of scope and that is where closures come in so what happens is this inner function is essentially saying okay I'm inside this outer function it has this outer variable so I'm going to save this outer variable I'm going to make sure I know what this outer variable is at all times and even if the function that defined this variable is no longer I'm executed anymore it exits out of the function it's okay I'm still going to keep track of the outer variable and that's why you can see outer is being printed out outside here and we had in a variable also being printed out if I for example passing an inner variable you can see it gets printed out right there and the most common use case for this a lot of times is to have variables that you pass into functions that can be accessed inside of other functions we can also create a variable inside of here we're going to call this outer two and we're going to set this equal to high and we can also log that inside of here so we can say console dot log I would over to and you can see high is being printed out again this is inside the scope that is outside this function so this function is contained inside this function so everything in the outer function is available inside the inner function since in JavaScript anything on the inside has access to the things on the outside of its scope essentially it has access to its parent scope its parents parent scope and so on everything that is outside of it and it has access of course to the things inside of it now this here is a fairly contrived example so probably one of the more common use cases where you're going to see this is if you're using something like Axios or fetch so if we come in here and we have a function that's going to do fetch so we want to fetch you know for example some URL so we're gonna just say you know URL whatever it is some random URL that you're fetching and then inside of here you're going to have an actual promise that's being returned so we can say dot been and this is going to take a function and this function is a function that's inside our outer function and inside of here we would have access to our outer variable so we could say outer variable for example and in most cases we'd probably pass in the URL here and we pass it in here and again we'd have access to that URL inside this inner function and now obviously this looks a bit different this is an arrow function not a standard function but either way it's still a function defined inside of another function and this inner function has access to all of the scope of this outer function so it has access to this URL variable even though this fetch is only going to call this dot vend function long after outer function is done being called really all you need to know about closures is that when you have a function defined inside of another function like this that inner function has access to the variables and scope of the outer function E if the outer function finishes executing and those variables are no longer accessible outside that function so if you enjoyed that video make sure to check out my other videos linked over here and subscribe to the channel for more videos just like this one thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 119,267

Rating: 4.8868484 out of 5

Keywords: webdevsimplified, javascript closures, javascript closure, closure, closures, closure js, closures js, javascript closure tutorial, javascript closure example, javascript closure scope, javascript closure function, js closure explained, js closure tutorial, js closure private variable, javascript private, js private, javascript private variable, closure tutorial, closure example, closure explained, javascript tutorial, javascript, js tutorial, js, closure javascript

Id: 3a0I8ICR1Vg

Length: 6min 55sec (415 seconds)

Published: Tue Dec 03 2019