This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.

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

Bianca shows how to create closure by calling a function and saving the returned function as a variable. Bianca then 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 Closure" Lesson

[00:00:00]
>> Bianca Gandolfo: All right, so we're taking it a little more advanced. It is going to let me? Okay, this one is working. Okay, so let's save our whatever this return gets saved into here. Whatever this returns, you could save in here, right. So let us start with this one.

[00:00:27] Who is next? Who just went last? You, OK. What happens first?
>> Unidentified Male Student: It is a brand new [INAUDIBLE] continue from where you highlighted.
>> Bianca Gandolfo: So we are calling this function, that's where I would like to start.
>> Unidentified Male Student: So then you are saying that the my alert to funcalert?

[00:00:58]
>> Bianca Gandolfo: Mm-hm, but we have to, since we are calling the function, we need to go into the body of the function, right. So we go into the body of the function, what's the first thing that happens?
>> Unidentified Male Student: To find the variable X with a string help. I think I find a clue.

[00:01:17]
>> Bianca Gandolfo: Yep and Josh, what happens next?
>> Josh: Setting a counter.
>> Bianca Gandolfo: Yeah, initializing a counter a zero. Awesome, Ginny?
>> Ginny: In setting a function to "lerter.
>> Bianca Gandolfo: And then Cameron what happens next?
>> Cameron: An alert with the string and every count we're on. In this case zero.
>> Bianca Gandolfo: So you say that it's going to call the function?

[00:01:54] Where is it being invoked?
>> Cameron: Right. It returns alerter next.
>> Bianca Gandolfo: Yeah so it returns whatever value is held,
>> Bianca Gandolfo: Right, and the value that it's held is a body of a function. So the body of the function is now funcAlert.
>> Bianca Gandolfo: Thumbs, are we good? Make sense, okay.

[00:02:26]
>> Bianca Gandolfo: Now, what happens next? Chris?
>> Chris: So then would it go to the constant funcalert2 equals my alert to call the function again?
>> Bianca Gandolfo: Yep, it would call the function a whole other time, and just like we mentioned before, we'll create a new execution context. All of these things get re-initialized.

[00:02:57] So we have a new instance of the string in memory, we have the new counter. We create a new function, and then we return that function, and we have it now in this funcalert2, okay? Then what happens? [LAUGH]
>> Unidentified Male Student: I want to jump and be like, it's gonna return,

[00:03:25]
>> Unidentified Male Student: It's gonna call the function body of the alerter.
>> Bianca Gandolfo: That's right, that's right.
>> Unidentified Male Student: That right?
>> Bianca Gandolfo: Yeah.
>> Unidentified Male Student: Okay, cool.
>> Bianca Gandolfo: Yeah.
>> Unidentified Male Student: All right then, that's what I've been going for the whole time.
>> Bianca Gandolfo: [LAUGH] Yeah, no, your intuition is on the mark. So because my alert returns this function body,

[00:03:59]
>> Bianca Gandolfo: We can reference it, right? We talked about this in the scope exercise too, and so what is this gonna be Jamie?
>> Jamie: Is it gonna alert help I think I found a clue?
>> Bianca Gandolfo: Mm-hm.
>> Jamie: And then, one?
>> Bianca Gandolfo: Yep, yep, exactly. So now, what happens if we do this?

[00:04:36]
>> Unidentified Male Student: Okay so it's gonna go back to the body, alerter.
>> [SOUND]
>> Bianca Gandolfo: It's a trick question.
>> Unidentified Male Student: Hang on.
>> Bianca Gandolfo: So this.
>> Unidentified Male Student: No it's not. If anything its going to [INAUDIBLE].
>> Bianca Gandolfo: This is going to call, this is going to invoke, or try to invoke whatever this returns.

[00:04:58] What does this return.
>> Unidentified Male Student: An alert screen. Like an alert.
>> Bianca Gandolfo: But it doesn't return anything. It just alerts. Yeah.
>> Unidentified Male Student: It doesn't return anything.
>> Bianca Gandolfo: Yeah, it just returns on the fine. So trick question. That won't work, cool.
>> Unidentified Male Student: Okay so it's like a one and done?

[00:05:13]
>> Bianca Gandolfo: Well, not exactly, because we could just reference, we could just run this line again. Now what's going to happen? Aisha?
>> Aisha: Adds another, it iterates.
>> Aisha: Or no, it starts over again.
>> Bianca Gandolfo: Well.
>> Bianca Gandolfo: These are the important questions. Does it start again, or does it keep adding?

[00:05:46] So, in this case, my alert created one execution context and then when we call funcalert we are recreating some child execution context. But we are not recreating the parent execution context, okay? So we are actually are retaining access to count.
>> Bianca Gandolfo: Just like before when we were doing that, do you remember?

[00:06:18]
>> Bianca Gandolfo: So every time we call this,
>> Bianca Gandolfo: It's gonna increment this, so the next time it'll be two, and then three, etc. That make sense?
>> Bianca Gandolfo: Can I get thumbs on that? We're good? If you had a side thumb or a down thumb, feel free to ask a question cuz it's gonna get a little weirder in a second.

[00:06:41]
>> Unidentified Male Student: Okay it just iterates count in the parent scope.
>> Bianca Gandolfo: It incriments it.
>> Unidentified Male Student: It incriments it. Does it?
>> Bianca Gandolfo: Yeah.
>> Unidentified Male Student: Okay, cool.
>> Bianca Gandolfo: In its parent scope that's created by this call. However, or and, we created another execution context from my alert a second time.
>> Unidentified Male Student: Yeah, but that's still zero.

[00:07:03]
>> Bianca Gandolfo: Yes, and so it's still gonna be zero because they're separate, yeah?
>> Bianca Gandolfo: Okay, you guys are the smartest group I have had so far. You really are getting anything, or you are lying to me, I don't know.
>> Unidentified Male Student: The right answers.
>> Bianca Gandolfo: Yea [LAUGH]
>> Unidentified Male Student: I'm just lying.

[00:07:27] [CROSSTALK]
>> Unidentified Female Student: And possibilities of what I think it is, tell me. [CROSSTALK] [LAUGH]
>> Unidentified Male Student: Really good at guessing first, right?
>> Bianca Gandolfo: Yea, it's a good skill to have. Okay, so let's just check this out. Okay, so then we have our funcalert. Okay, it's kind of small, but it says, help I think I found a clue 1.

[00:07:54] Great, and then we can do it again and then this says 2. Can you guys probably can't even see that, super small, and then 3 great. So funcAlert2,
>> Bianca Gandolfo: Is gonna start one.
>> Bianca Gandolfo: And two, so they're separate. So it's retaining a memory of its parent's scope, but it's different than this other function's parent scope.

[00:08:25] And that's a really important concept to remember, because it's kind of the core of how everything sort of fits together in JavaScript.
>> Unidentified Male Student: Feel like two different states right now.
>> Bianca Gandolfo: Mm-hm, yeah. Well you have a few, depending on how you divide it up, but I see what you mean.

[00:08:51] Okay, that was fun. I like that one. [BLANK AUDIO]