Closure

[00:00:00]
>> Kyle Simpson: With our basic understanding of scope under our belt, we can now look at closure because closure without understanding scope is actually not understanding closure. You really can't get closure unless you understand the scope that goes underneath it. So now that we have a general sense of how this idea of scope works, how lexical scope works, we can start to look at how closure works in our programs.

[00:00:24]
And I wanna give you just a very simple definition for closure. Closure is when a function remembers the variables outside of it, even if you pass that function elsewhere. And there's two parts to this definition that are key for you to pick up. Number one, that it is remembering that a function is remembering variables outside of it.

[00:00:42]
We mean variables that were declared in some outer scope. So of course a variable is going to remember its own variables, ones that was declared inside of it. But we can also have a function that accesses variables that were created outside of it, and that's an important key that we often need to do.

[00:01:00]
And we'll see some examples in a moment of that. But that's only part of the definition because the second part is that it's only closure, we can only observe that as a closure if we take that function and we pass it somewhere. We pass it as a callback argument or we return it, we assign it to some property and pass that object around.

[00:01:23]
Whenever we treat a function as if it's a value, remember I said a bit earlier, that's one of the key principles here in JavaScript is that functions are first class values. We can pass them around, that's what makes them expressions. Well if we have a function that is of a value that we can pass around somewhere, then we have a chance of observing this idea of closure.

[00:01:45]
It's probably best for me to just explain it with code, so let's look at a code example. Undoubtedly you've probably used a set timeout at some point or another or at least seen someone use a set timeout before. And the set timeout is creating a function expressed, it's referencing a function expression that has a variable in it, line three the question variable, and that question variable is not inside of waitASec.

[00:02:10]
It's not a variable that's declared there. Where is it created? Its created in the outer scope of the function ask. It's specifically that parameter called question. Now when we run ask on line seven and we pass in a string, and then we call this setTimeout, immediately after we finish calling the setTimeout before it's actually run, just as soon as we've set up this setTimeout, the ask function has finished.

[00:02:38]
It's not gonna run anymore, it's completely done. And we would normally think that all of the variables inside of a function go away when a function finishes. So we would normally think that question would just get deleted, it would just get what's called garbage collected. But the reason it doesn't is because that timer is still waiting for 100 milliseconds with a function called waitASec in its memory.

[00:03:03]
And that waitASec function is referencing question, and as a result of that it keeps the question variable, it keeps that scope alive. And that magic, the way that works, that's called closure. It is said that waitASec as a function has closure over the question variable. So that allows us to remember some variable, remember the value that's in that variable, even when our function is gonna get executed in an entirely different place, and sometimes in an entirely different timeline.

[00:03:35]
Here's another example. Not passing a function as an argument callback like we did in the previous slide, but here we're gonna return back a function. So I call the ask function passing in what is closure as a string, and what I get back, line seven I assigned to the variable my question.

[00:03:54]
I'm assigning that function expression as a value. I'm assigning it to this variable called my question on line seven. Somewhere later in the program, if I execute that function, it's still knows what the contents of the question variable. And the reason it knows the contents of the question variable is because of closure.

[00:04:16]
It had closure over that variable, it preserved access to that variable, and it was able to use that at a later time or in a different place of the program. Closure is a tremendously important concept in all of programming. And this quick brief little look at it is no where near enough to fully get your brain wrapped around it.

[00:04:35]
But I want to encourage you of all the things I've talked about, if you don't find anything else that interests you to dig into and really learn more about, closure is gonna be one of the most important and one of the most prevalent concepts that you're gonna encounter throughout all the rest of your programming career.

[00:04:51]
It's a feature that figures heavily in almost every programming language that you will future encounter. And so JavaScript being one of the first early movers to have this feature, we've got a really rich language ecosystem that we can play with this and use it for all these different patterns, use it to remember values over time.

[00:05:09]
It's incredibly powerful, and it's kind of amazing how you find new usages of a tool that you've known for a long time. Even I will find a new usage some day, and I'm like, wow, I never even thought to use closure that way. It's such a prevalent and important concept that I don't want you to skip over it.

[00:05:26]
Even if in your brain you're still not quite sure what this is, this is one of those areas that you definitely wanna dig into and learn more about.