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 "Closure Demonstration" 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 demonstrates closure and shows ES6 equivalent. Bianca takes questions from students.

Get Unlimited Access Now

Transcript from the "Closure Demonstration" Lesson

>> Bianca Gandolfo: This is a function. It takes a name, it gives a name.length, and it returns another function that expects a weapon. Then it assigns the length, and the weapon.length, and it does some magic, to return a Boolean value.
>> Bianca Gandolfo: You can imagine, this is our deep learning algorithm that's gonna tell you if someone's a murderer or not, or if they could possibly be one.

[00:00:31] So let's take a look at how this one works. So let's just put us there. And so we have our new clue. We're gonna pass a name, so who do you guys think is a murderer, off the top of your head?
>> Audience: Edwin Green.
>> Bianca Gandolfo: Green? Okay, so now this is called didGreenDoItWithA,

>> Bianca Gandolfo: [LAUGH] didGreenDoItWIthA, okay. Now, let's check out what It looks like, all right. So didGreenDoItWithA, is a function that.
>> Bianca Gandolfo: Okay, is a function that is expecting a weapon. Okay, so returning that function, not lives here.
>> Bianca Gandolfo: So, what we can do here, is we can pass. So, how this works is, so we passed the name, right.

[00:02:16] Name.
>> Bianca Gandolfo: We save it here and then we return this function for the same exact rules that we mentioned before, with the parent execution context only being initialized once, it's gonna retain access to length. And so, you can do it,
>> Bianca Gandolfo: With the, I don't know. Led pipe, and so you can keep doing it and it's always gonna be green.

>> Bianca Gandolfo: Thumbs, that make sense? Does that works? Does it make sense that it works? What is your question?
>> Audience: So we originally assigned green to the name and the name.length, right?
>> Bianca Gandolfo: So we passed in green, we get the length of green, we save it in length, and then we return this function and that function, is assigned to this value which we have printed here.

[00:03:32] So then when you call it, have to remember not to double click on that anymore. So when you call it weapon gets passed, and then clue equals length right, which is from the parent scope, right. So clue, length, get it from the parent scope plus weapon.length that we just passed in.

[00:04:00] And then magic. So here's another interesting thing, applying the same concept here where we have the access, we have access in our parents scope. The difference here is what? What are we returning here?
>> Bianca Gandolfo: An object with two functions in it.
>> Bianca Gandolfo: So this one is our count clues function.

>> Bianca Gandolfo: And then we can say, counter equals count clues. And now we can see our counter, is an object with a property count, that holds a function. And a property reset, that also holds a function, right. So the count will increment the counter by one. And the reset will just set into zero.

[00:05:03] So we can do multiple counters, again, for the same reason because, when I initialize this execution context, it's gonna be separate than the first one. So, now we can say counter.count, we're gonna call it because it's a function. And we can just keep counting all those clues and then reset it when we wanna start over.

[00:05:26] And then counter2.count, then counter.count, is separate.
>> Bianca Gandolfo: Well, it's misleading because they're around the same number [LAUGH].
>> Bianca Gandolfo: There, okay?
>> Bianca Gandolfo: And again, how that works is when we call this count function, it retains access to this parent scope. And it's just gonna increment every time.
>> Bianca Gandolfo: Has anyone done these kinds of things before in their code?

>> Bianca Gandolfo: And here is the ES6 equivalent, if you wanna get fancy.