This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.
Transcript from the "Closure Exercise Solution" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Bianca Gandolfo: So the first one was write a function called nonsense that takes an input string. This function contains another function blab which alerts that string and is immediately called inside the function nonsense. And here's an example of what blab should look like. It's just a function alert string, and so we have our function nonsense here, I called the parameter string.
[00:00:29] And then if we were gonna call nonsense, we could say nonsense, and we could, I actually already did that down there. So we can call nonsense down here with blah blah blah, so string is now this blah blah blah. And then, we enter through the function body here.
[00:00:49] We see that there's another function, we skip it, we call blab, and blab then alerts, what?
>> Speaker 2: Blah blah blah.
>> Bianca Gandolfo: Yep, blah blah blah, exactly. So for the second one, we're doing something a little bit different. Instead of immediately calling blab, we're calling it after two seconds.
[00:01:09] So we're setTimeout, and then it will still alert blab.
>> Bianca Gandolfo: So for the third one, instead of calling it inside, or doing a set time out, we're just gonna return the function body. So we see here on line 34, that we return blab, which is gonna return the function body.
[00:01:33] So blabLater is actually gonna be the function body here, and it's gonna alert when we call it. So if we call blabLater here, it's going to what? What is it going to alert?
>> Bianca Gandolfo: Kevin do you know?
>> Kevin: Blah blah blah.
>> Bianca Gandolfo: Yeah, exactly. So it's gonna alert blah blah blah and then blabAgainLater, we called it what's that gonna return?
[00:02:23] Tanner?
>> Tanner: It's gonna return blah blah blah?
>> Bianca Gandolfo: Close. It's actually gonna return hehehe.
>> Bianca Gandolfo: Because we called nonsense with hehehe. So string, and this case is gonna be hehehe. Can you guys see that in the back?
>> Bianca Gandolfo: Cool. What if we did blabLater here? What's that gonna alert?
[00:03:00] John?
>> John: Could you repeat the question please?
>> Bianca Gandolfo: I'm sorry, I didn't realize you were on your phone. If we called blab again later right here, what is that gonna return?
>> Bianca Gandolfo: What is this gonna alert?
>> John: Blah blah blah.
>> Bianca Gandolfo: Yup, so it's still gonna alert blah blah blah.
[00:03:33] So the fact that BlabAgainLater is a learning hehehe doesn't affect the blah blah blah, if that makes any sense. [LAUGH] And why is that? Why are they two separate things?
>> Bianca Gandolfo: Grace, do you remember? Tanner remembers. Why Tanner?
>> Tanner: I just want redemption because you're passing the variables.
[00:04:04]
>> Bianca Gandolfo: Yeah, absolutely. And every time we call that function, the inner function's creating a new scope. Even though they both are sharing the same parent scope, it's new. It's a new inner scope here for this function.
>> Bianca Gandolfo: Cool.
>> Bianca Gandolfo: So this is a function called lastNameTrier. You pass it your first name, and it creates this complicated algorithm.
[00:04:35] You can try on last names, like little girls do when they have a crush. If you have lots of crushes you can see which one sounds better with your name. So, how it works is you pass in your first name so if your first name is Farmer, you would pass Farmer.
[00:04:52] And then you can try on last name Brown and that's going to log Farmer Brown. And it's also really convenient If you really, really like someone and if you wanna just write their name all over everything. You can just like do this a bunch of times. I don't think boys do this, but girls they write their crushes names a lot.
[00:05:14] No? No? No one? Okay. Just me, all right fine.
>> Speaker 6: Do you use those gel pens?
>> Bianca Gandolfo: What? Yeah, with gel pens, absolutely. You've got to be careful because they smear, there's an art to it. Okay, anyway, too much information. So here, if you want to try on different Farmer names, so Farmer Jane Farmer Lin, for example.
[00:05:41]
>> Kevin: That's for the farmer to find out if he's gonna marry a Jane or a Lin.
>> Bianca Gandolfo: Yeah.
>> Kevin: So guys could use this one.
>> Bianca Gandolfo: Yeah, absolutely. It's a gender neutral.
>> Kevin: Or it could be a female farmer, too.
>> Bianca Gandolfo: Yeah.
>> Kevin: Marry a farmer like Jane or Lin.
[00:05:54]
>> Bianca Gandolfo: Or if you're giving birth, and you know that your prodigy's gonna be a farmer, you can match that.
>> Kevin: It's very unisex, yeah.
>> Bianca Gandolfo: Yeah, cool. Anyway, so here we have our function. So our parent function is here, and then we have an inner function here. And again, we're returning that inner.
[00:06:20] So how we'd run this is we'd say, and I forgot to mention, Katrina is our, these are Katrina's solutions, she is awesome. Look her up, add her on Twitter, all those things. So Katrina, so var firstNameKatrina pass the string Katrina, and then to lastNameTrier. So the string Katrina is now a first name.
[00:06:48] We have this inner function. We skip it, and we return it. So, firstNameKatrina now is the value of this inner function. So now when we call first name Katrina, we can pass her last name which not gonna try to pronounce, Uychaco. I guess I tried it. So Uychaco is last name and then we're just gonna console that log the first name plus the last name.
[00:07:16] The cool thing here is that this parameter stays the same, Katrina. We don't actually have to say var firstName, like this, = firstName, or anything like that. It just holds reference to the parameters cuz they also live in the scope.
>> Bianca Gandolfo: So we can just do it like that, and then you can also try it with Smith as well.
[00:07:48] Any questions on that?
>> Kevin: Just like you can do Fibonacci series with these because you're restoring the results of the next.
>> Bianca Gandolfo: Yeah.
>> [INAUDIBLE]
>> Bianca Gandolfo: Yeah you can do a lot of different things with it.
>> Bianca Gandolfo: I think there's one thing. There's one thing I wanted to mention for this nonsense function, a common mistake that I see.
[00:08:16] Is that when you are writing the inner function, you'll also give it a parameter name of the same name from the parent function. And that's not gonna work because if you don't pass anything to blab, so when we're calling blab here with no arguments. That means string is now undefined and the most local the most local variable value is the one that wins.
[00:08:45] So this alert here is going to then alert undefined because it's being overwritten by this parameter name. So if you're seeing that problem, just double check your inner function's parameter and make sure that that function is actually taking an argument, If it's not then it's gonna be undefined.
[00:09:07]
>> Bianca Gandolfo: Cool, so we have lastNameTrier, and then we have this storyWriter. So this is a function that returns an object with two methods, one method is addWords, which will add words to your function, and the other one is u rays. So you might imagine that this is like that game that people play where you start off with like the beginning of a sentence, then the next person adds a sentence, then you go on and on, you create a big story.
[00:09:34] Has anyone played that like on road trips before? Not in Minnesota? Okay some of you have. Okay. So we have, just an example of how we'd use it, we have this variable farmLoveStory. And we have storyWriter, which is a function that we call. And then farmLoveStory is now gonna be an object.
[00:09:56] That has a property addWords, which you can then pass a string. And so this string was, There was once a lonely cow. And then that will just return. There was once a lonely cow, and then you can add more words, and then it will concatenate that string. It will say there was once a lonely cow, it saw a friendly face, because we just added this there.
[00:10:17] Another example would be story of my life, which is my code broke, and then I ate some ice cream. It's pretty consistent in my day to day. And then you can erase it. So that's how you would implement. That'd be the functionality of the story writer function. And so this is what it looks like on the inside.
[00:10:35] So in our closure scope, we have our story. Which just starts off empty right? And then we return this object and this object has two properties. The first one's addWords, which is a method. And this method takes a string. And you add the string and then I put a space in between.
[00:10:59] And then I return the story.trim. And what that does is it just deletes the trailing space, so it doesn't print like, I ate some ice cream, and then space. It doesn't actually turn them off, it just shows a copy of the string without the last space. So the space actually still exists in story.
[00:11:25] And the other, and the erase function's pretty simple. You just set story back to an empty string.
>> Bianca Gandolfo: Cool? Any questions about that?
>> Kevin: I wasn't getting, so when you run that does, where you see that on the, it'll actually print that off one the console?
>> Bianca Gandolfo: Yeah.
[00:11:53]
>> Kevin: Because I wasn't getting mine to print out.
>> Bianca Gandolfo: In the console?
>> Kevin: Well, not in the console, in the-
>> Bianca Gandolfo: What do you mean? This one?
>> Speaker 7: It builds it correctly but it doesn't opt for the console like your examples show us it should.
>> Bianca Gandolfo: Are you returning?
[00:12:13] Are you saying my example isn't?
>> Kevin: No, mine isn't.
>> Bianca Gandolfo: Make sure that you're returning.
>> Kevin: On a trend, but it just returns story.
>> Speaker 7: Since it's not being executed from the console, it's not gonna dump it out there unless you actually have a console log statement. If you execute the call from a console statement, because that's the return value, then it would show it.
[00:12:45]
>> Bianca Gandolfo: Right.
>> Speaker 7: So when you're refreshing your page, it doesn't.
>> Bianca Gandolfo: Are you doing it in JS Bin?
>> Speaker 7: I was not. None of us were using the strings.js file from yesterday.
>> Bianca Gandolfo: Yeah, you can just run it directly in your console like this, and it should print out.
[00:12:59]
>> Kevin: It's doing it now.
>> Bianca Gandolfo: Cool.