Check out a free preview of the full JavaScript: From Fundamentals to Functional JS course:
The "Creating a Closure" Lesson is part of the full, JavaScript: From Fundamentals to Functional JS course featured in this preview video. Here's what you'd learn in this lesson:

Bianca now creates a closure by calling a function and saving the returned function as a variable. She later uses this variable to invoke the function call to demonstrate it still has access to the original scope.

Get Unlimited Access Now

Transcript from the "Creating a Closure" Lesson

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

[00:00:03]
>> Bianca Gandolfo: So here is the same thing, except hold on, I like it when it says, I'm stuck in a closure.
>> Bianca Gandolfo: Let's put that there.
>> Bianca Gandolfo: I see, that's why I changed it. Never mind, it can't do it. Done. So here we have our closureAlert. The one thing that we did change here is we change x to 0 because we're gonna be changing it when we alert.

[00:00:32] And the other thing that we change is instead of calling it inside of here, we're just returning it. This is really similar from our scope exercises as well, right? So we return alerter,
>> Bianca Gandolfo: Which means that when we call closureAlert, we enter into the function body, right? First thing it does is initializes x at 0.

[00:00:56] It sees that we have, whoops. It sees that we have this alerter function, skips over it and then returns it. And so our funcStorer is storing alerter. And let's just put that in the console so we can look at it.
>> Bianca Gandolfo: So, if we just type out funcStorer here, we see that it's just that function, right?

[00:01:28] And the same with funcStorer2. Again, and what's it doing is incrementing x and then returning x. That's what ++x means. So you add 1 to x, then you return it. Whereas x++ is you return and then you add, so it doesn't show up as well. So, if we wanted to then call alerter, how do we go about doing that?

[00:02:02]
>> Speaker 2: funcStore and then indication?
>> Bianca Gandolfo: Yeah, so we just have funcStorer.
>> Bianca Gandolfo: And we call it just like that.
>> Bianca Gandolfo: What's it gonna alert?
>> Speaker 3: One.
>> Bianca Gandolfo: Yep, and then if we call it again?
>> Speaker 3: Two.
>> Bianca Gandolfo: Two.
>> Bianca Gandolfo: Why is it two?
>> Speaker 4: It remembers the scope that it was in.

[00:02:40]
>> Bianca Gandolfo: Mm-hm.
>> Bianca Gandolfo: And so this is our closure.
>> Bianca Gandolfo: Which is a fancy word. Just forget the word for now, but for those of you who are wondering, that's the closure, and I'll talk about it a little bit more. So when funcStorer, we call it, it's totally referenced to this alerter function.

[00:03:08] So you can kind of imagine that when we call it, it goes into this function body and increments x, then returns it as an alert. And so x is then 1. If we call it again. And I see I'll call you in a second. Call it again, so this is 1, it's gonna go back inside alerter and it's gonna increment again and alert it, it's gonna alert two.

[00:03:38]
>> Speaker 5: Is that because we're really kind of storing it? We're not calling closureAlert, we're storing it. Sort of referenced to it.
>> Bianca Gandolfo: Yeah, yeah, so you're storing it in a variable so that we can access it later and call it later and that function because of lexical scope has access to its parent scope still.

[00:04:02] So in a way it remembers the environment that it's from.
>> Speaker 4: So you're calling the closureAlert but the closureAlert is returning a function it's going to find internally.
>> Bianca Gandolfo: Mm-hm.
>> Speaker 4: But you haven't executed that internal function yet.
>> Speaker 5: So the difference would be if we on the console just invoked closureAlert twice, you just get 1 every time you do closureAlert.

[00:04:29]
>> Speaker 4: You would get.
>> Speaker 5: If you're not storing it.
>> Bianca Gandolfo: Yeah, exactly.
>> Speaker 4: You would get a new copy of the alerted function as the return value.
>> Bianca Gandolfo: Mm-hm. So, if we did funcStorer2, that's still gonna alert 1 because every time we call a function it creates a brand new scope.

[00:04:51] And did you have a question, Mark?
>> Speaker 2: [COUGH] I just wanted you to cover preincrement versus post increment.
>> Bianca Gandolfo: Mm.
>> Speaker 2: And then the other question was is return alerter the same as calling invoking alerter? And I think-
>> Bianca Gandolfo: Okay. So as far as the incrementer here, ++x, what that does is it adds 1 to x and then returns it, versus x++, it returns x first and then increments it.

[00:05:27] But that's not important.
>> Speaker 6: By returns you mean make available to the alert function?
>> Bianca Gandolfo: Yes, yes. So if we changed it then it would first, if we did this it would say 0 and it just isn't very good for my example. Da, and then the second question is, is returning alerter the same as invoking it and returning it, and the question is absolutely not.

[00:05:51] Because if we're invoking it here, then we can't call it down here. What we're doing when we don't invoke it, is that we're just returning the function definition itself. So, instead of returning it, if we, right here we can like console log it here. Console.log, (alerter). And this will show us what we're gonna return.

[00:06:14] We'll put this in the console and kind of look at it. So again, we're just console logging alerter. And then, it's gonna be returned. And so we know whatever this function returns is then gonna be stored in this variable.
>> Bianca Gandolfo: Yeah, and then there's our console log. There's our console log there and then we can also look at funcStorer and we see that it's the same thing.

[00:06:41] And since it's a function now, we can call it. If it wasn't a function, we couldn't call it. So for example, if we just returned alerter and called it already, it's gonna return whatever this function is returning. So in this case, it's not returning anything. But if we wanted to put a return there, just for the example, we can return true.

[00:07:12] So the change here is inside the alerter function, I'm returning true. And then instead of just returning the function definition, I'm returning and invoking the function, so it's gonna invoke the function, and return whatever that function invokes.
>> Bianca Gandolfo: Cool, oops.
>> Bianca Gandolfo: So then if we look at funcStorer now, it's undefined.

[00:07:46] That's weird. I changed it. So, I guess I erased that return true. So it's undefined because this function is returning undefined.
>> Bianca Gandolfo: But if we return true, return true, and then did it. And we looked at funcStorer, and now holds the value true. And you can't, true is not a function, true is a value, so you couldn't call true, that doesn't make sense.

[00:08:23] So that's why we want funcStorer to be a function and not the result of the function. So that we have this little window into that parent scope that we can access laer and it can be very powerful.
>> Bianca Gandolfo: And now since funcStorer is a function, we can go ahead and call it and then we can call it again.

[00:08:47] And this is our counter, we can count.