The full video and many others like it are all available as part of our Frontend Masters subscription.

Kyle Simpson

Kyle Simpson is an Open Web Evangelist from Austin, TX, who's passionate about all things JavaScript. He's an author, workshop trainer, tech speaker, and OSS contributor/leader.

Kyle Simpson

You Don't Know JS

Closures are often misunderstood by JavaScript developers. Closures are when a function remembers its lexical scope even when the function is executed outside that lexical scope.

Get Unlimited Access Now

Kyle Simpson: This last discussion that we're going to have here. Then we're going to have another exercise. This last discussion in this module is called closure. Closure is one of those magical concepts that you may feel really confident about, or you may feel like, man I have never been able to understand closure.

Antidotely, whenI was learning C programming way back in the days, one of their earliest languages I learned, and I was actually not even in college yet. So I'm in high school, little dumb kid, and I'm trying to learn this stuff and we didn't have Google and the way we learn now.

So it was like trying to find used programming books at the book store to try to learn stuff. And when I was trying to learn C programming without the benefit of the internet, and this was like early to mid 90's, without the benefit of much of the internet, what I would run across in books is I would run across the discussion in the C language of pointers.

And it was always, every time I ran across a discussion of it or if I found somebody talking about it or heard somebody talking or whatever, I would always get this sense that pointers. Or like this magical level of enlightenment that you had to get to, you could write the C language without understanding pointers.

And you could do a certain amount, but you could not really fully experience all that the C language had to offer, until you understood the pointers. For a long time I didn't get it and always felt like, One of these days that lightbulb is going to go on and I'm going to get pointers, and then it did.

And truly and honestly it was that lightbulb moment where I was like, I get it, and I can reference pointers from pointers, and do all kinds of address math and the whole language opened up to me at that point. So anecdotally, it's sort of like we feel that way about closure.

When you're first learning the language you may hear people talk about closure. You may think that it has something to do with functions and being passed around and scope, but you're not really quite sure. And you know that people say that when you get Closure the whole language kind of opens up, and your eyes are open to this whole other side of the language.

And I do recall a time when I didn't understand Closure fully, and then, I got it, and I had a different perspective. All that is to say, that if you are hoping for today to feel like that magical enlightenment moment. I have to warn you that there's going to be a slight letdown, because it's going to feel a little anti climatic when I explain to you what Closures actually are.

And that's on purpose not because I want to dash your hopes or anything, but because everything that I just spent the last three hours teaching you is the fundamental basis for how closures work. And now when I explain what they are, you're going to be of course I've already been using closures, I didn't even realize it.

I didn't have a name for it. It's going to feel a little bit like an anticlimactic letdown. It's not this, you know, magical moment, it's going to be more like when Neo first sees the Matrix. It's not a new thing, the Matrix was always there, he just didn't have a way to see it.

And now you're going to see closure in a way you couldn't see it before, okay? So I'm going to give you the what you need to know definition for what is closure and I'm going to explain it. Now it turns out that Closure is actually a mathematical concept. It comes from lambda calculus.

And I don't know what the F lambda calculus even is. So I can't give you a mathematical definition, I just know that it is because I can read a Wikipedia page, comes from lambda calculus. I do know, sort of as a side note, I worked with this guy some time ago years back.

And this dude was hardcore, like Mr. Computer Science. I mean, he was brilliant, and knew about the y combinators, and all this stuff. And he had a tattoo on his arm of the lambda form of the y combinator, written out with the lambda symbols and stuff. He had a tattoo of the lambda.

I don't even know what it meant. It was literally Greek to me. I had no idea what that was. So I can't give you that. I can't give you an academic definition, per se. But what I am going to give you is the what you need to know, the practical way to say this.

And this is my definition, so when I ask you what Closure is, I'm expecting you to give me this definition back, hopefully it's helpful. If, beyond this class you want to discard it, that's fine, but here's the definition. Closure is when a function remembers its lexical scope, even when that function is executing outside of its lexical scope.

Let me say that again, Closure is the capability for a function to remember and access its lexical scope. Even when the function is executing well outside of it's defined lexical scope. We understand that a function has access to his lexical scope. We've already seen that before. When I had bar inside of foo, bar could reference a variable in bar, but it could also reference a variable in foo through lexical scope lookup.

We already understand how that mechanism works. The capability for bar to continue to reference that same scope lookup, even when bar is executing outside of it, is what makes closure. So let me illustrate. Here, I have a function, outer function foo. He's got a variable called bar on line two.

On line four, I declare an inner function. Remember my inner nested scope bubbles. So I get a scope bubble around baz. And that's inside of the scope bubble around foo. We know that baz can reference bar. We know that baz can say bar and it will first check for a local variable on like four and a half, it doesn't find it there.

So it goes up and it finds it in the enclosing scope on line two. Everybody remember that right? So we understand that, and that mechanism is most appropriately described as life cycle scope. But because Java script has first class functions, functions can be passed around, and they can be executing in entirely different environments.

So, if we take the reference to the functions baz, and we pass it outside of the function foo, In other words, down here on line eight, I take a reference to baz and I pass it outside. I pass it as a reference to another function. On line 12, when I execute that baz function, he is still able to access the lexical scope in which he was defined, even though he's executing outside of that lexical scope.

Does everybody see on line 12 why he's executing outside of the bubble. There's a bubble around lines one through nine, he's executing on line 12. But it still works, he's still able to access that variable, and that is closure. The fact that lexical scope stayed attached to that function no matter where he got transported.

And it's not just a copy of the lexical scope. It's a reference to the existing lexical scope. It's kept alive, and that's closure. And you're going to say, aw, I've been doing this for years and I didn't know that what that meant. Yeah, that's your let-down moment, right. Let's see a couple more examples of more common examples.

Ready to take your code to the next level?

Intense courses with world-class teachers and unlimited access to our growing library of videos for the great price of $39 per month.

Get Unlimited Access Now