This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.
Transcript from the "Closure Objects" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Bianca Gandolfo: So the other cool thing is that this also works if we're returning an object with methods. So the same rules apply. Now see, look, we have these functions that are still inside this parent scope. Even though we're actually returning it in an object. So let's explore it that looks like.
[00:00:31]
>> Bianca Gandolfo: Well I'll type it out here and then I'll paste it. So we're gonna call,
>> Bianca Gandolfo: So here's like a counter, we're gonna call counter.
>> Bianca Gandolfo: Okay, so where did we leave off? Actually I think we failure the last one, right last time, so we should start at the beginning.
[00:00:53] I guess that'll be you, Rich.
>> Rich: Okay so, [COUGH] it's like a global function, I guess, called counter.
>> Bianca Gandolfo: Mm-hm.
>> Rich: It's based on and then it finds that and it goes down to the, skips the whole body.
>> Bianca Gandolfo: So we said great, there's the counter and we skip it.
[00:01:16] And then Grace.
>> Grace: Signed myCounter. The returned value of counter function.
>> Bianca Gandolfo: Mm-hm, sure, so we called counter and then it goes into the counter body. And then Joe.
>> Joe: Sets the local variable n to zero.
>> Bianca Gandolfo: Mm-hm.
>> Joe: Then my counter is equal to the return value so you return that.
[00:01:47]
>> Bianca Gandolfo: What is this?
>> Joe: Two functions.
>> Bianca Gandolfo: Yeah, so this is an object literal, it has two properties on it, one is count and one is reset. And they're both, so you could call it a method. It might not look like an object in this form, but if we delete this, you can see that that's just an object with our properties in there.
[00:02:16] So we're returning an object, great. So what is myCounter now, Kim?
>> Kim: Object count colon the function.
>> Bianca Gandolfo: Mm-hm, totally.
>> Bianca Gandolfo: And then if we wanted to increment the counter, how would we do that, William? Noting that my counter is an object, actually let's inspect it before we jump ahead.
[00:02:49]
>> Bianca Gandolfo: So, we have my counter, is an object with two properties so, if we want it to count, we wanted our counter to count, how do we access the counter property?
>> Grace: Dot.
>> Bianca Gandolfo: Yeah we could use a dot. Dot what?
>> Grace: Dot count.
>> Bianca Gandolfo: Dot count, like this?
[00:03:18] So if we don't call it right, it's just gonna be the name, so we need to invoke our function and it's gonna increment it. There's one, and we could keep doing it right, it's just gonna keep counting.
>> Bianca Gandolfo: So we can see my counter, it's still just an object that we haven't effected it or anything and then if we wanted to reset it,
[00:03:45]
>> Bianca Gandolfo: Can we do this?
>> Rich: Yep.
>> Bianca Gandolfo: Yep, that will also work. You can use bracket notation. And so,
>> Bianca Gandolfo: Count like that. So as we see, we can return the functions from inside of an object as well. And this n is still holding access to its parent scope in its previous environment.
[00:04:19] [NOISE] So if we wanted to call it again, oops. It's myCounter.count(), and we have to call that since it's a function. It's gonna be one.
>> Bianca Gandolfo: This one will be two, etc.
>> Bianca Gandolfo: Cool, thumbs?
>> Rich: The only difference between this and the previous example is that we're using the dot notation to access a function in an object.
[00:04:57]
>> Bianca Gandolfo: Yeah.
>> Rich: That's being returned from the-
>> Bianca Gandolfo: Right, so the main difference is that, for this one, we're just returning one function. And the next one we're returning an object that contains two functions. So if you wanted to have to do different things like reset the counter, you're gonna need two different functions, right.
[00:05:19] So this is how you would do that.