Note: This course was created on 03/29/2016 by Frontend Masters. We are pleased to host this content in our library.
- Carousels, panes, and modules
- Middle-end architecture
- Secure phrase generator
- Routing functions
- Calling the API
- Rendering on the page
- Shared data validation
Skill Level Intermediate
(techno oriental music) - [Kyle] Basically, we're going to kind of switch into chapter two mode.
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".
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.
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.