Check out a free preview of the full Deep JavaScript Foundations course:
The "Scopes and Closures Introduction" Lesson is part of the full, Deep JavaScript Foundations course featured in this preview video. Here's what you'd learn in this lesson:

Kyle reviews the topics that make up the second core foundation of JavaScript: Lexical scope, Nested Scope, Hoisting, Closure

Get Unlimited Access Now

Transcript from the "Scopes and Closures Introduction" Lesson

[00:00:00]
>> Kyle Simpson: So let's turn our attention now to the second core foundation of JavaScript, the scope, the lexical scope system and specifically the closure pattern that's build on top of that. [COUGH] This will be our most intensive curriculum in this workshop. So expect there's a bunch of exercises that we iterate on here, three or four I think at least.

[00:00:24] Exercises where we iterate on these topics and there's a lot to get through. So, definitely make sure you keep yourself, you keep your brain fresh on these topics. If you're watching online or watching later, make sure you go back and review the materials you don't miss out. So, where we wanna go is first looking at how lexical scope works in terms of nesting, how these scopes nest together.

[00:00:48] Then we wanna talk about a topic, how many of you have heard of hoisting before? Have you heard that term? Okay, so we're gonna talk about hoisting. Hoisting is made up, it's not real, it doesn't exist. If you look at the spec, there's no existence of the word hoist cuz it's not a real thing.

[00:01:03] It's actually a metaphor for describing how the compiler works. And by the way, did you know JavaScript is a complied language? We're gonna get into all of that stuff. So we're gonna talk about some compiler theory, talk about how lexical scope is actually processed and what that means for how we interpret our code.

[00:01:20] Then we're gonna look at closure specifically. How many of you have ever had or given or maybe both the job interview, what is closure? Anybody ever had that question or heard that question before? It's a pretty common one. I received it at least once, and I gave it probably a hundred times in my capacity working as a developer.

[00:01:39] And when I would ask people in a job interview, I was brought in because I was kind of the JavaScript expert at my job, or whatever. So they always me to come in and vet the candidate, do they really know what they're talking about with JavaScript? That's why I was brought in.

[00:01:53] So I had this set of rigorous questions. And I could tell pretty quickly whether or not somebody had paid any attention to regularly thinking about the language or if they would just you know read some Stack Overflow post or something like that. So it does not take much to filter through that.

[00:02:09] But I asked that question, what is closure? And much more often that not, the answer I would get to that question would be something to the effect of, well, it's like asynchronous callbacks, and set timeout, and click handlers. Okay, can you give me any more information than that?

[00:02:29] And people would stumble to articulate. And as I said at the beginning of our course, closure is the most important concept ever invented in computing science. Why is it so important and yet the most basic of questions can you articulate? If I were to ask you right now, if I put you on the spot and said, tell me what closure is, if you haven't seen this course before and you haven't read my book, how would you answer that question?

[00:02:55] I think it's important to have a very crisp and specific answer to that question, to know exactly what it is. And it turns out, closure's not some brand new thing that I have to teach you. I just have to teach you to recognize where closure already exists in all your existing programs.

[00:03:09] So we're gonna look at closure. We wanna be really familiar with that and how we use it. And finally, that leaves us our big takeaway, the big punchline here. It leads us to understanding the module pattern. The module pattern is probably the most important pattern in all of JavaScript in terms of code organization.