Check out a free preview of the full Organizing JavaScript Functionality course:
The "Nested Scopes" Lesson is part of the full, Organizing JavaScript Functionality course featured in this preview video. Here's what you'd learn in this lesson:

Declaring a function within another function creates a nested scope. While nested scopes can add complexity to the code, Kyle explains why they are important and introduces the audience to the concept of closure.

Get Unlimited Access Now

Transcript from the "Nested Scopes" Lesson

[00:00:00]
>> [MUSIC]

[00:00:39]
>> Kyle Simpson: Basically, we're going to kind of switch into chapter two mode. So, if you're following along, you can switch into chapter two. And I'm gonna skip over some of the initial parts of chapter two. Basically, the first half of chapter two is kind of layering on extra details that we glossed over in chapter one.

[00:00:58] So, for example, this comparing values and talking about coercion. I talk about it in more detail here than I do in chapter one. There's even much more value, there's even much more detail than that in the books in the series. So, these are just different layers. And so, without getting too much into the weeds, I'll just say that if you want to spend some time going through chapter two, this will definitely layer on more details for you about intricate nuances of the JavaScript language.

[00:01:25] But we wanna focus on is more towards the middle and second half of this chapter where it starts to push some of our understanding these features a little bit further. So in particular, I'll call your attention to, for example, this example. Let me pull that out, copy it over to a code editor.

[00:01:44] And I'm gonna zoom out just so we can see all of it. Okay, so here what you see is I've got an outer function called foo but I also have an inner function called bar. It's a thing that we haven't seen yet, but it turns out that functions could be nested inside of other functions, and you can keep going as deep as you need to.

[00:02:03] And that may seem like I'm not really sure why that would be useful. There's lots of different places in complex JavaScript applications where that sort of thing happens. So, here what we'll note is that this function baz is declared and then I call baz here. But if I were to try to call baz down here on line 16, I wouldn't be able to because that identifier, baz, exists only inside of the scope of bar.

[00:02:32] Remember, we can't go down in scope, we can only go upward in scope. So, here inside of the foo function, I would not have access to the baz that only exists here and in these lines. But the reverse, I do have access. If I access the variable a, even though that's available two levels up I'm still able to access it.

[00:02:53] So I can print 1, 2, 3 as I do here on line 10. So, this idea of nested scopes is actually really really important to how we structure sophisticated JavaScript programs. Particularly, not even the three levels deep but particularly this, where we have one function inside of another function.

[00:03:11] I kind of alluded earlier that that's kind of the gateway into this topic of closure. So, another thing that we deal with in chapter two is talking, motivating, what is this topic of closure and why is it useful? Now this may look a little bit complex. I'm not gonna get into the details of how closure works.

[00:03:30] I'm just going to illustrate what closure does, so that you can observe it. So, what we wanna talk about with closure, let me scroll down here to where closure's discussed.
>> Kyle Simpson: What we wanna talk about with closure is this example that I'll use and I will build this example piece by piece for you

[00:03:53]
>> Kyle Simpson: So, I have a function here called makeAdder, that takes a single parameter, let me zoom in slightly. This is makeAdder and it takes a single parameter, could be like a number that we pass in. And you'll notice that inside I declare another function called add. And inside of that, I reference both the parameter y, which of course, I have access to the parameter y, because it's a variable for me to use.

[00:04:25] But I also have access to x, because of my scoping, because of my nested scoping. So, I make reference to both of those variables in this add function. And then I do something rather peculiar, if you haven't seen this programming technique before, which is that when I return a value from this makeAdder, I don't return a number or a string or a Boolean, I actually return the function itself.

[00:04:52] Remember, I said earlier that functions are values and I showed very quickly that you could sort of pass a function in. Well here, I'm doing the reverse. I'm returning a function back out. Now that won't look like that makes much sense if this is your first time seeing it.

[00:05:09] Closure does take a while to get used to. But take my word for it, it's one of the most powerful programming techniques across any programming language. And it is intrinsically one of the most important things that you can learn about JavaScript specifically [COUGH]. So, we'll just take for granted that when we call a makeAdder, we're gonna get a function back.

[00:05:31] Let's not worry too much about the implementation details. So, if I said something like makeAdder 5, the return value from that is a function. All right, so if I assign that to a variable like fn, what I've gotten back is a function. A function that I can later call.

[00:05:53] And you remember, let me switch back over here, you'll remember that makeAdder expects one parameter. And the function that it gives back expects another parameter, which we called y. So, here I know that if I could pass something in, like for example, the value 10. What I know it's going to happen into the scenes is that that 5 value that I initially passed in plus the 10 value that I just passed in, both of those get added together and that return result comes back.

[00:06:23] So, if I say function 10, what am I expecting back? 15, you see, I didn't have to pass in the 5 here because the function I got back already is setup to remember the 5 from the initial call.
>> Kyle Simpson: All right, the mechanism looks a little weird and mind bending.

[00:06:43] They took me months of trying to wrap my head around it when I first learned it. So, don't feel bad if that looks strange to you. But that is the essence of closure. People, if you've ever heard that word before. If you've never heard the word before, it probably just sounds like I'm talking nonsense.

[00:06:58] But there is this technique in programming called closure. What it refers to is the fact that this function, as a value, we haven't even called it yet, as a value, it is able to remember what was going on in the place where it was created. Remember, it was created right here and the thing that it's able to remember is that specific x variable.

[00:07:23] So, at the time we called it, we passed in a 5 and that function now, from here on out, no matter how many times we call it, if I say function 10, then I'll get 15 back. If I later called function 20, then I'd get what?
>> Speaker 2: 25 there.

[00:07:38]
>> Kyle Simpson: 25, no matter how many times I call that function it's always gonna remember that initial thing that I passed in at the time it was created. And that's what we mean by closure.
>> Kyle Simpson: So, is there a question here?
>> Speaker 3: Yeah, there might have been a little bit further back there.

[00:07:53]
>> Kyle Simpson: Yeah, it's 10 y, yes. On this line 4, when I pass in 10, that's getting assigned to the y parameter.