In today's video, I'm gonna be explaining to you exactly what closures are and you'll be surprised.

How is simple.

They are to understand once you wrap your head around the idea.

So let's get started.

Now.

Welcome back to Webb.

Have simplified my name's 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 a really simple JavaScript on 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 Ah, 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 and 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 Java script and 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 Java script 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 toe everything inside the outer file, and one thing that's really interesting.

So we change this here to a variable that could be renamed.

So we have.

Our name is Kyle of here, and we change our name down here.

We'll just say that the new name is going to be Joey and we saved 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 because, for example, if we have the name here and then we come down here, change the name to something else, we'll 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, 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 inter function.

And as you can see down here, we're calling outer function with the variable outside.

So now we're 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 the outside, which gets set.

And then we have this function that gets returned here, and the reason were 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 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 tried 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 inter function is essentially saying, okay, I'm inside this outer function.

It has this outer variable, so I'm going to save this out of 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 executed anymore 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 have the inter variable also being printed out.

If I, for example, passing inter variable, you can see it gets printed out right there.

And the most common use case for this a lot of times is tohave 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 gonna call this outer too, and we're gonna set this equal to high on.

We can also longer that inside of here, so we can say counsel that log outer too and you can see high as 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 inter 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 parents cope.

It's parents, parents 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 euro.

So we're gonna just say, you know you are, l whatever it is, some random you're well that you're fetching.

And then inside of here you're going tohave an actual promise that's being returned.

So we can say that Ben 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 passing the girl here and we pass it in here and again.

We would have access to that Europe inside this inter 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 inter function has access to all of the scope of this outer function.

So it has access to this.

You're all variable even know this fetch is only gonna call this dot ben function long after outer function is done being called.

Really, all you need to know about closures is that when you have a function to find inside of another function like this, that inter 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 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.