JavaScript: From Fundamentals to Functional JS Body

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Bianca Gandolfo: Now what about function bodies? It's a little bit different than a function definition, just because a body is what's located between these two parentheses. I'm sorry, these two curly brackets. And the important thing, while you guys are searching for more function bodies. The important thing to note about a function body is that it's never run until call time.

[00:00:24] So, the code located within those curly brackets is not interpreted until you call the function. So in this case, for nameImprovers, since we're never calling it, this code here Never runs. And it has no real value.
>> Bianca Gandolfo: Cool. So let's see, who's next?
>> Speaker 2: Does the body, before the .hide, the body of the function?

[00:00:57]
>> Bianca Gandolfo: Not quite, so we are looking for two curly brackets. That's how we know it's a function body, unless it's an object or in a statement, but on this slide.
>> Speaker 2: How about after function vowel?
>> Bianca Gandolfo: Yeah, so right here we have a function body.
>> Bianca Gandolfo: And then Ben?

[00:01:18]
>> Ben: In the on function, the second parameter, yeah and then starting at the-
>> Bianca Gandolfo: Yeah, so right here. That's a function body. And Jake, what's important to remember about function bodies?
>> Jake: They are the verbs.
>> Bianca Gandolfo: Functions are verbs, that's true. You can, what's it called? Phone a friend?

[00:01:49]
>> Jake: [LAUGH] I can? Kim, help me out here, you're my lifeline.
>> Kim: What was the question?
>> Bianca Gandolfo: What's important to remember about function bodies?
>> Kim: They're inside brackets.
>> Bianca Gandolfo: Yes, that's true. But there's something else, I'm looking for like one specific thing, anyone remember?
>> Jake: They're not called till.

[00:02:09]
>> Kim: Doesn't call.
>> Bianca Gandolfo: Yes, so it's not run until we call the function. Awesome.
>> Bianca Gandolfo: Cool. Speaking of calling the function, we have this thing called call-time invocation. So, just for fun we can improve someone's name.
>> Bianca Gandolfo: Whoops, uh-oh. Okay, so I'm just gonna put this function here.

[00:02:42] And notice, I just put nameImprover there. We have it, right. When I type out nameImprover it shows me what the function looks like. That's not call time, that's just me checking what is stored at that variable. Just like when we say var x equals 2 and I just type x, it returns 2, same thing.

[00:03:07]
>> Bianca Gandolfo: So.
>> Bianca Gandolfo: How many people here really love their name?
>> Bianca Gandolfo: No? Everyone? Okay, so we have three people who really love their name. So everyone else, could use some name improvement. So, everyone else just volunteered.
>> Jake: [LAUGH]
>> Bianca Gandolfo: [LAUGH] Full of tricks and traps. I mean it's Halloween time, it's time for those things.

[00:03:38] Okay, so of those people.
>> Bianca Gandolfo: All right, you can recommend a friend. He wants to nominate someone.
>> Speaker 6: Tanner.
>> Bianca Gandolfo: Tanner, okay.
>> Tanner: [INAUDIBLE]
>> Bianca Gandolfo: [LAUGH] And who has an adjective that I can borrow? Has to be a nice one, can't be like stinky or something.
>> Speaker 6: Buff.

[00:04:02]
>> Bianca Gandolfo: Buff? Okay.
>> Speaker 2: [LAUGH]
>> Bianca Gandolfo: Buff.
>> Speaker 2: Nice.
>> Bianca Gandolfo: Awesome, so Colonel Tanner McBuff pants.
>> Speaker 2: Nice.
>> Bianca Gandolfo: You can call your lawyer and arrange a new name if you want. I know it's way better, right?
>> Tanner: I'll get right on it.
>> Bianca Gandolfo: Yeah, [LAUGH] All right, I'm gonna call you that for the rest of the day.

[00:04:23]
>> Tanner: I appreciate that.
>> Bianca Gandolfo: Yeah, no problem. So notice here, so we have, let's just look at the inside of our function, that we have our parameter here, name and our adjective here. And they have no value until we pass these parameters, tanner and buff, right? And then suddenly they have value and suddenly the code in this line and in between the inside the function body gets called.

[00:04:57]
>> Bianca Gandolfo: And so that timing, that order is really important.
>> Bianca Gandolfo: Cool. So.
>> Bianca Gandolfo: Where else do we see call time?
>> Speaker 2: Hide.
>> Bianca Gandolfo: Yeah, hide. Here's a perfect example. So, we're calling hide. Where else? So, where did we leave off? So, we had Jake and then Kevin. Where else do we see call time?

[00:05:32]
>> Speaker 2: ForEach.
>> Bianca Gandolfo: Yes, right here, absolutely and then, for sure
>> Speaker 2: Long.
>> Bianca Gandolfo: Where?
>> Speaker 2: Long?
>> Bianca Gandolfo: Yeah, on this call time. [SOUND] Let's see, so I guess we'll start again at John.
>> John: Dollar sign?
>> Bianca Gandolfo: Yeah, so here, we're calling jQuery. Anything else? There's one more.
>> Speaker 2: Long and val?

[00:06:05]
>> Bianca Gandolfo: Yeah, they're just log. So console.log. There's two of them. So, mm-hm?
>> Ben: Are you saying call time is another word for invocation?
>> Bianca Gandolfo: Yeah, exactly the same.
>> Ben: But not on val because that's just a function.
>> Bianca Gandolfo: Val here?
>> Speaker 6: That's a parameter.
>> Kim: Parameter.
>> Bianca Gandolfo: That's a parameter name.

[00:06:27]
>> Ben: But that parentheses.
>> Bianca Gandolfo: This one?
>> Ben: No.
>> Jake: That's defining the function.
>> Bianca Gandolfo: Yeah, so you see.
>> Jake: And the parameters that are gonna be passed into it.
>> Bianca Gandolfo: Whenever you see the keyword function.
>> Ben: Uh-huh.
>> Bianca Gandolfo: Followed by two parentheses, that's not call time, that's part of the function definition.

[00:06:46] So, the main thing to pay attention to is just the keyword function. If it's followed by parentheses, then that's just, that's gonna be the parameters.
>> Ben: So, like function val that's kinda inline definition.
>> Bianca Gandolfo: Yeah, so that's just an anonymous function that we're passing to fourEach. And then val is gonna be a parameter to that function.

[00:07:10] Mm-hm, cool.