This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.
Transcript from the "Closures and Functional Programming" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Bianca Gandolfo: So here is an example of how we could use Closure. So maybe we have this add function. And we want to make a generic add function, like add5 = add(5). And now we have this add5 function that we can call later with another number. Let's do a smaller number.
[00:00:31] And that would give us 7. And let's walk through exactly how this is working. Let's play it again. Where do we leave off for our game, do we leave off? Grace you went. Joe went. I think it is your turn. Let's walk through how this is running in our browser.
[00:00:51]
>> Speaker 2: Well, you set the function add as a variable.
>> Bianca Gandolfo: Mm-hm.
>> Speaker 2: You skipped down to the bottom?
>> Bianca Gandolfo: Cool. Perfect. Okay.
>> Speaker 3: Variable, add5 = add(5).
>> Bianca Gandolfo: So we'd call the add function, and then who's up back there? William.
>> William: So you'd call that function that the variable add is pointing to.
[00:01:19] So the value of 5 goes into the num.
>> Bianca Gandolfo: Again, to the function body. Num is now 5. And then, Andy?
>> Andy: I remember creating a local variable called num1, setting it to the parameter 5.
>> Bianca Gandolfo: Mm-hm.
>> Speaker 6: And a new function add to num2.
>> Bianca Gandolfo: Mm-hm.
>> Speaker 7: Just divide.
[00:01:51] And then you return that function without running it.
>> Bianca Gandolfo: Yep. So we skip over the function body here. This never is run. Then we just return, add to num1, and then, Jake.
>> Speaker 8: And it's complete?
>> Bianca Gandolfo: Almost. So we return it, where does it return to?
>> Speaker 8: add5(2)?
[00:02:15]
>> Bianca Gandolfo: Yeah, so now var add5 is whatever that function returns, which is addToNum1, right?
>> Bianca Gandolfo: So now this is a function. And then Tanner?
>> Tanner: Now we're passing 5, or
>> Tanner: Passing 5 into the number?
>> Bianca Gandolfo: We just did that one so we skipped past that.
>> Tanner: And then we add 2 to 5?
[00:02:47]
>> Bianca Gandolfo: Mm-hm, so we are calling the add5 function
>> Tanner: Twice.
>> Bianca Gandolfo: with the argument too.
>> Tanner: Okay.
>> Bianca Gandolfo: No, we only called it once. We called it here. This is a different one. This is add. Now this one's add5. Add5, remember, is gonna be this function here because that's what we returned.
[00:03:07] And then we pass it too. And then where does it go, Phil?
>> Speaker 10: [COUGH] Well, because add5 contains that function, it also contains the variable num1 and the original scope.
>> Bianca Gandolfo: Mm-hm.
>> Speaker 10: Which is 5.
>> Bianca Gandolfo: Mm-hm. So, we hop back up here.
>> Speaker 10: But the return statement [INAUDIBLE].
[00:03:31] I mean 2, 5.
>> Bianca Gandolfo: Yeah, exactly. So we call add5 with 2, we jump up here to the function body, num2 is now 2. And then we add num1 + num2. Num1, again, we got from the first time that we called add. So, num1 = 1. We got 5 from here, and because of closure we have access to the environment here.
[00:04:03]
>> Speaker 10: The previous environment.
>> Bianca Gandolfo: The previous environment, yes.
>> Bianca Gandolfo: And that's how we've got 7.
>> Speaker 10: So, if you can identify [INAUDIBLE] right?
>> Bianca Gandolfo: Well, actually, we add 5 and do 3
>> Bianca Gandolfo: it's gonna be 8. Why?
>> Speaker 11: Because the add(5) is retained as num1 = 5.
>> Bianca Gandolfo: Mm-hm.
[00:04:38] Because, so even though we have reference to this scope here, every time we call add5, we're creating a new scope here. So num2 is gonna change, and we're not actually affecting num1. Num1 is being saved. Num1 is always gonna be 5 in add5. But num2 is gonna be the one that changes.
[00:05:01] So when we pass 2 here, num2 is then 2. And when we pass 3, at that point, we make a new scope. This new scope here, but just because we have a new scope for the addToNum1 function, that doesn't mean the parent scope is different, it's still the same.
[00:05:25] And then num2 would be 3 which would be 8.
>> Speaker 11: What if we didn't have that addToNum function. Let's just assume that that whole function definition of addToNum1 is gone.
>> Bianca Gandolfo: Mm-hm.
>> Speaker 11: I guess that defeats the purpose of that enclosure but,
>> Bianca Gandolfo: Mm-hm.
>> Speaker 11: but you could still, so then that's, then when you assign add(5) to add5, you're just like,
[00:06:00]
>> Bianca Gandolfo: It would call this whole thing over again.
>> Speaker 11: Yep.
>> Bianca Gandolfo: And it would reset this variable.
>> Speaker 11: Right. So it'll just be like a regular storing a function in that variable, like your plain vanilla?
>> Bianca Gandolfo: Yeah.
>> Speaker 11: Got it.
>> Bianca Gandolfo: Yeah, so the key here is that for the closure, is that we have a function in here, and then we're returning it
[00:06:21]
>> Bianca Gandolfo: so that we can call it later.
>> Speaker 11: And then using the parent variable for permanence.
>> Bianca Gandolfo: Yeah, and actually we don't need this here. This is just for clarification. You could actually delete this and call this num. It would actually still work.
>> Speaker 10: So just for fun, if you had after that last statement, if you had add(10), and then you,
[00:06:53]
>> Bianca Gandolfo: Like where?
>> Speaker 10: I'm sorry if you add.
>> Bianca Gandolfo: Here?
>> Speaker 10: No, at the very bottom.
>> Bianca Gandolfo: Mm-hm.
>> Speaker 10: If you said add5 = add(10).
>> Bianca Gandolfo: Add5 = add(10)?
>> Speaker 10: Yes.
>> Bianca Gandolfo: Mm-hm.
>> Speaker 10: And then you said add5(2), what would you get?
>> Bianca Gandolfo: So this would be rewriting add5.
[00:07:19] So add5 was add(5), right, which is gonna be this function. This would overwrite it. Oops. This would overwrite it.
>> Bianca Gandolfo: And make it 10, so then, whoa, okay. It doesn't like it when I click there.
>> Bianca Gandolfo: So if we did add5(2), then that would be 12, because whenever we use an assignment like this, it's going to completely override and just delete it.
[00:08:01]
>> Speaker 11: Whatever was there?
>> Bianca Gandolfo: Whatever was there, yeah.
>> Speaker 11: Is add5 keeping that same reference in memory?
>> Bianca Gandolfo: It will override.
>> Speaker 11: It'll override that down.
>> Bianca Gandolfo: Yeah. It'll overwrite everything. Yeah, but it would be better if we could just call that add10, right? But if we didn't want to do that, it would still be the same.