This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.
Transcript from the "Closure Questions" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Bianca Gandolfo: So in similarly to our last exercise, we're just calling alerter later. So the setTimeout is JavaScript calling it later, in one second.
>> Bianca Gandolfo: And here, we are deciding to call it later. Explicitly.
>> Bianca Gandolfo: Thumbs? It's okay if you have a middle thumb. Most people don't understand this.
[00:00:36]
>> Bianca Gandolfo: Thumbs online.
>> Bianca Gandolfo: Any questions? What is most confusing about this idea right now?
>> Speaker 2: So I get the part where you're storing closure alert in the funcStorer and that becomes a function and so there's like that permanence with x? Because you're not really calling anything, you know what I mean?
[00:01:10] But I still don't understand why is that called closure, or what's the closure in it?
>> Bianca Gandolfo: Yeah, so this part is the closure, The closure is the function that you can call later. And it's called a closure because it holds, it has reference to a variable from the environment.
[00:01:33] From its parent environment. So, this is a closure. FuncStorer is a closure because it holds reference to x. So x is initialized and manipulated in a different scope. So we could do a bunch of stuff to x. In this case, we're just adding to it, but you can imagine that you could do a lot of different things.
[00:01:53] And since funcStorer holds a reference to the environment, it's a closure.
>> Speaker 2: If you just wrap all that code in an anonymous function with no name, is that all that code would be in a closure as a function? Is that true, I guess?
>> Bianca Gandolfo: No. I'm not sure.
[00:02:16] So you're saying if I wrapped all of this in?l
>> Speaker 2: Yeah, because the way I'm saying it is you can either assign a function to a variable. Assign, if you took off the line where it says var funcStore = closureAlert, if you took the parentheses off, you'd just be reassigning the function to funcStorer and it wouldn't be a closure.
[00:02:39] But if you leave the parentheses on, it is a closure. So really it's just a function.
>> Bianca Gandolfo: It's because the key here about why we're calling it is cuz it's storing a function. So this closureAlert is returning a function.
>> Speaker 2: So what's the difference between var funcStorer = closureAlert without parentheses and that one?
[00:03:04]
>> Bianca Gandolfo: Sure, that's a great question, so let's do that. So we can first just. Oops. So there's our closure alert, right? If we just type out closure alert it's just a function that's not called. So it just prints out the function body. So if we call it funkStore.
[00:03:36] This is where you store the funk. And we just assign that to closureAlert like this. It's just gonna assign the function body of closureAlert. So now if we look at funkStore, with a k. It's just a function body, and we could call it. What is this going to return?
[00:03:57]
>> Speaker 2: A new alerter function.
>> Bianca Gandolfo: Mm-hm. It might return something that looks like this, right?
>> Bianca Gandolfo: Right? Whoops.
>> Bianca Gandolfo: And what we want is, we wanna be able to call the alerter function, from funcStorer. So what we could do [blank audio] So this is myAlertFunc = closureAlert ();.
[00:04:44] Now myAlertFunc.
>> Bianca Gandolfo: Is actually that function, which then you can call and it will actually alert. Versus, what did I call it, funcStore?
>> Bianca Gandolfo: If I call it, it's just returning that function. We'd have to do something like this for it to work. And that's just weird. And it wouldn't work, if we wanted to do it twice.
[00:05:11] It would always just alert once. So by storing that alerter function in a variable and being able to call it more than once, we can continue to have access to that parent scope, to this variable x
>> Speaker 3: So its not like you have to have a global variable, you know what I mean?
[00:05:36] I'm trying to think of very simple real world applications for this as opposed to saying I'm gonna set x to be a global variable at my window.
>> Bianca Gandolfo: Right.
>> Speaker 3: And messing with that. It's a compact way to can still have that functionality.
>> Bianca Gandolfo: Mm-hm.
>> Speaker 3: But keeping it local.
[00:05:52]
>> Bianca Gandolfo: Yeah, totally. So we wanted to,
>> Bianca Gandolfo: Let's see, so another example here unless we have questions with this example? Yeah.
>> Speaker 4: The alert ++x Why does that increment x?
>> Bianca Gandolfo: That's just a shorthand. You can think of it saying x-
>> Speaker 4: The alert, that gives you an alert box, right?
[00:06:19]
>> Bianca Gandolfo: Yeah, it would be in the alert. So it's gonna increment it, and then it will alert it, and that creates an alert box. That's just a browser feature.
>> Speaker 4: After that, CNB one?
>> Bianca Gandolfo: Yeah, right here?
>> Speaker 4: Yes.
>> Bianca Gandolfo: Yeah.
>> Speaker 4: And so when you're saving it down at the log, let me see if I understand this, you're not saving only the function but all of the value function, after the function writing?
[00:06:51]
>> Bianca Gandolfo: Yes, so you're saving all the values within the function and also all the values it has access to in the scope. So also it has access to this parent scope. So it has access to its own scope as well as the previous scope. Which is the same as how we were doing it here.
[00:07:19] We just alert X and this alerter function had access to X up here. And then for this example, we have the set time out. Even though alerter's being called later, and one second. It still holds access to its' parent scope. The only difference for this one is that we're actually just returning it.
[00:07:51]
>> Bianca Gandolfo: And then, once we return it, then we can call it later. So for the set timeout example, JavaScript's calling it later. In this example, we're calling it later. We're calling it later here. [BLANK AUDIO] One more question. [BLANK AUDIO]
>> Speaker 5: Can you do solo y's or y?
[00:08:21]
>> Bianca Gandolfo: Why you would do this?
>> Speaker 5: What's in it for the programmer?
>> Bianca Gandolfo: What's in it for the programmer? There's a lot.
>> Speaker 5: Give us the top three, here.
>> Bianca Gandolfo: The top three? Well, I'm gonna go through different use cases, next. But I mean, the biggest thing is privacy, right?
[00:08:44] Is that you can make an interface into, when we get into the module pattern I'll show you how you can kind of. You can make classes, basically, classes in JavaScript using closure, and you can limit how your program can interface with certain values. So once it's private, the only thing that can access it once you have this closure scope here.
[00:09:12] The only thing that can access and manipulate that data up here is this function. And so you can really limit on how you can manipulate whatever variables you have in the closure. So that's the biggest thing. But there's a lot of different use cases for it.
>> Speaker 5: There's one more question here.
[00:09:34]
>> Bianca Gandolfo: Sure.
>> Speaker 5: The funcStorer calls alerter, she's asking if that's correct.
>> Bianca Gandolfo: Yes.
>> Speaker 5: Okay. It doesn't call closureAlert.
>> Bianca Gandolfo: No. It does not call closure alert. Cuz what happens Is once we call closureAlert, whatever that function returns is actually being stored in the variable. It's not actually, when we refer to funcStorer later it's not looking up and calling closureAlert again.
[00:10:02] ClosureAlert at this point is being called once. And then when we reference it. Down here? It's just referencing whatever this had returned from the beginning. So when we call it again, it's not recalling closureAlert cause if that was the case, we would be resetting x to zero every time.