Nested scopes

(techno oriental music) - [Kyle] 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 going to 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. 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'll definitely layer on more details for you about intricate nuances of the JavaScript language.

But what we want to focus on is more towards the middle and second half of this chapter where it starts to push some of our understanding of 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. I'm going to 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've also got an inner function called "bar".

It's a thing that we haven't seen yet, but turns out that functions can be nested inside of other functions, and you can keep going as deep as you need to. 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 called "baz" here, but if I were to try to call "baz" down here on line sixteen, I wouldn't be able to, because that identifier "baz" exists only inside of the scope of "bar." 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. So I can print one, two, three as I do here on line ten. 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. 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, and I'm not going to get into the details of how closure works. I'm just going to illustrate what closure does so that you can observe it. So, what we want to talk about with closure let me scroll down here to where closure is discussed.

What we want to talk about with closure is this example that I'll use and I will build this example up piece by piece for you. 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, 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. 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. 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.

So, we'll just take for granted that when we call a "makeAdder" we're going to get a function back. 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. 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. 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 ten what I know is going to happen under the scenes is that that five value that I initially passed in plus the ten value that I just passed in. Both of those get added together, and that return result comes back. So, if I say function ten, then what am I expecting back? Fifteen.

You see, I didn't have to pass in the five here because the function I got back already is set up to remember the five from the initial call. Now that mechanism looks a little weird and mind-bending. It 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. 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, but there is this technique in programming called closure. What it refers to is the fact that this function has a value.

We haven't even called it yet. Has 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 is able to remember is that specific "x" variable. So, at the time we called it we passed in a five and that function now from here on out, no matter how many times we call it... If I say function ten, then I'll get fifteen back. If I later called function twenty, then I'd get what? - [Student] 25 back.

- 25. No matter how many times I call that function it's always going to remember that initial thing that I passed in at the time it was created. And that's what we mean by closure. Say's there's a question here. - [Student] Yeah. It might have been a little bit further back there. - Yeah. Is ten "y"? Yes. On this line four, when I pass in ten, that's getting assigned to the "y" parameter.