JavaScript: From Fundamentals to Functional JS, v2 Function Scavenger Solution

[00:00:00]
>> Bianca Gandolfo: We're gonna start with definitions, Function Definitions. You wanna start over here, Ben?
>> Ben: Sure.
>> Bianca Gandolfo: Where is a function definition?
>> Ben: In the first function, name improver equals function?
>> Bianca Gandolfo: Yeah, here. Cool.
>> Bianca Gandolfo: We have a function definition here. How about Dan, do you see another one?

[00:00:22]
>> Dan: The other callback function, inside forEach?
>> Bianca Gandolfo: Yep, here's one. And Ryan?
>> Ryan: That looks like the last one to me. C, yep.
>> Bianca Gandolfo: Awesome. How do we know that's a function definition? Jenny?
>> Jenny: That says function and then evokes it after.
>> Bianca Gandolfo: This say function and isn't necessarily evoke it.

[00:00:52]
>> Jenny: Okay.
>> Bianca Gandolfo: Yeah. So it says function, we have some brackets, and we have some parenthesis and then we have some brackets. That's our function definition. It could be a little bit different, depends on how you name the function. This is one that we're saving it in a variable but you can also name your function by putting the name here.

[00:01:11] So you could just hit Save function, name, and then the parentheses.
>> Bianca Gandolfo: Buy yeah, that's the function definition. Awesome. Josh, where's the function name?
>> Josh: Name improver.
>> Bianca Gandolfo: Name improver. Awesome. Do you see another name?
>> Anthony: The other ones are anonymous, right?
>> Bianca Gandolfo: So this is an anonymous function that's assigned to a variable,

[00:01:49]
>> Bianca Gandolfo: But we have other function names, I should the easy one.
>> Bianca Gandolfo: So when we-
>> Altemir: Hide?
>> Bianca Gandolfo: Yeah, hide. That's a function name.
>> Bianca Gandolfo: Cameron?
>> Bianca Gandolfo: Do you see one?
>> Cameron: No.
>> Bianca Gandolfo: How about Eddie, do you see one?
>> Eddie: [COUGH] Is forEach considered a function?
>> Bianca Gandolfo: Yep, forEach is one.

[00:02:25] Chris?
>> Chris: On.
>> Bianca Gandolfo: Yeah, that's a good one. On. Abdi?
>> Bianca Gandolfo: You're kind of left with the trickier ones, to be honest.
>> Altemir: Is it console?
>> Bianca Gandolfo: Close.
>> Bianca Gandolfo: So you say console., which means it's what?
>> Bianca Gandolfo: If it has a dot, it means it's an object, so console is an object.

[00:03:00] And it has a method called log on it. Console has a lot of cool methods, you can do consol.assert, you can do consol.error, consol.dur, there's all kinds of fun ones. When I do too many consol.logs it'll do consol.error, and it'll be red and I'll know that's a specific one.

[00:03:21] Cool.
>> Ryan: Jonathan online is asking when would you use a function expression over a declaration.
>> Bianca Gandolfo: Yeah. So a function declaration is here when we're assigning it to a variable, and a function expression is a named function when we say function, like name here.
>> Bianca Gandolfo: It's about, it's a stylistic choice based on scope, which we'll talk about in the next segment.

[00:03:57] Yeah, it depends on,
>> Bianca Gandolfo: It's a stylistic choice, really. I like to save them into variable names. I'm a little more old school though, so the hipsters probably think something different. Good question. Cool, so we have log as a function name and there is actually one more function name here, other than the other log.

[00:04:24] Return.
>> Bianca Gandolfo: No, that return is like is a statement.
>> Ryan: Okay.
>> Bianca Gandolfo: Yeah.
>> Dan: Dollar sign.
>> Bianca Gandolfo: Dollar sign, yeah. So jQuery dollar sign is function. And how do we know these are functions or one clue, this isn't necessarily how we know, one clue is that it's followed by two parenthesis like this, right?

[00:04:51] So hide, you know.
>> Ryan: They take arguments.
>> Bianca Gandolfo: They can take arguments, yeah, absolutely. Great. All right, so where's the function body, where did we leave off? I think Jamie, it was you?
>> Jamie: Mm-hm, the return statement.
>> Bianca Gandolfo: Yeah exactly. So we have like in between these two brackets really is the function body.

[00:05:11] Michael, do you see any other function bodies here?
>> Michael: Yeah, the two console logs.
>> Bianca Gandolfo: Yeah, this one here and then also this one here. That's our function body. What's the important thing that we need to know about function bodies? That I mentioned earlier, do remember, Ben? Do you remember, Dan?

[00:05:31]
>> Dan: They don't get run until the function is invoked?
>> Bianca Gandolfo: Yeah absolutely, they don't get run until the function is invoked. Where is some invocations, Ryan?
>> Ryan: Log is an invocation. Both, well, not in the function bodies, well it depends on what you mean, because like was just said, the function bodies don't get invoked until it's run.

[00:06:02] But that would be an invocation.
>> Bianca Gandolfo: I see what you're saying.
>> Ryan: Yeah, so that would be an invocation when it gets invoked, when the function is called.
>> Bianca Gandolfo: Absolutely.
>> Ryan: Yeah.
>> Bianca Gandolfo: Yeah, so we're just talking about just a static analysis here, we're not actually running this code.

[00:06:19]
>> Ryan: Right.
>> Bianca Gandolfo: So yeah, so right here, log, that's call-time for our console.log, as well as here. Jenna, do you see any other ones?
>> Jenna: The hide be?
>> Bianca Gandolfo: Yeah.
>> [INAUDIBLE]
>> Bianca Gandolfo: Mm-hm, exactly. We have our two parenthesis next to each other. That means that we're calling a function.

[00:06:38] Do you see one, Josh?
>> Josh: forEach.
>> Bianca Gandolfo: Yep.
>> Josh: Query.
>> Bianca Gandolfo: Right there. Do you see one Altemir. Am I pronouncing your name correctly, Altemir? Okay. Just making sure.
>> Altemir: Have you considered the .on?
>> Bianca Gandolfo: Yeah, only because there's these two parantheses after it though.
>> Altemir: Yeah.
>> Bianca Gandolfo: I show DC1.

[00:07:11]
>> Jamie: The dollar signs?
>> Bianca Gandolfo: Yup, dollar signs with the parenthasis. Implecation, cool. All right,
>> Bianca Gandolfo: Arguments.
>> Bianca Gandolfo: What's the difference between arguments and parameters again? Michael, do you remember?
>> Michael: Arguments are passed to the function, parameters are used within the fuction.
>> Bianca Gandolfo: Yes, the parameters are like the variable names and the arguments have a value, contain the value.

[00:07:43] Awesome. Jamie, can you point out some parameters?
>> Jamie: Name and adjective.
>> Bianca Gandolfo: Yes. Right here, these are our parameters. We know that because it's in the function definition part, not the invocation part. I know this might seem like I’m going slow, but just really try to nail down how I identify where, which is what and how it all works together.

[00:08:16] Abdi, do you see any parameters?
>> Abdi: After the $('body').
>> Bianca Gandolfo: That's an argument cuz that's an actual value. Chris, do you see one?
>> Chris: The val-in, function val.
>> Bianca Gandolfo: Yeah, exactly.
>> Bianca Gandolfo: Great, all right. Now let's move on to arguments. Eddie, do you see any arguments?

[00:08:48] So we already said body was an argument.
>> Eddie: So button below that?
>> Bianca Gandolfo: Yep. Taking the, what is it?
>> Eddie: The easy way?
>> Bianca Gandolfo: Yeah.
>> Eddie: [LAUGH]
>> Bianca Gandolfo: The low-hanging fruit?
>> Eddie: Yeah.
>> Bianca Gandolfo: That's the Silicon Valley term that everyone says all the time. Do you see one?

[00:09:15]
>> Eddie: Unclick and function.
>> Bianca Gandolfo: Yeah. So this is one, two arguments. And then, Aisha,
>> Bianca Gandolfo: There's one more.
>> Aisha: Is the return doing something?
>> Bianca Gandolfo: The return is just a statement.
>> Aisha: Okay.
>> Bianca Gandolfo: Yeah. Altemir, do you see it?
>> Altemir: Would it be the function inside forEach?
>> Bianca Gandolfo: Mm-hm, exactly.

[00:09:59]
>> Bianca Gandolfo: Cool, any questions about that? Anything surprising, unexpected? No, okay.
>> Bianca Gandolfo: Okay, so return and side effects,
>> Bianca Gandolfo: Where'd we leave off? Josh. What do you want to look for, return or a side effect?
>> Josh: The return, I guess, since there's one right at the top.
>> Bianca Gandolfo: [LAUGH] Yeah.

[00:10:26] All right, point it out.
>> Josh: The second line.
>> Bianca Gandolfo: Yeah, so we have this return. This function actually returns something, which is great, we like that. Okay, Jenny, do you see a return,
>> Bianca Gandolfo: Or a side effect?
>> Jenny: I didn't see you there and I didn't understand how the console.log.

[00:10:47] [INAUDIBLE] mention that, but I don't understand it, so. [LAUGH]
>> Bianca Gandolfo: Sure, yeah. So the reason the console.log is a side effect is because, so a side effect is anything that doesn't, anything that reaches beyond the curly brackets of a function. So you see this function? If it's reaching outside of that and changing something, it's a side effect.

[00:11:13] And so, since this is going into the console and logging something, that's a pretty blaring side effect or glaring side effect, glaring or blaring? English, it's hard. If only we could just talk JavaScript all the time, it'd be much easier. Cool. So the console.log is gonna be a side effect.

[00:11:38] Brian, do you see anything?
>> Brian: The jQuery.hide.
>> Bianca Gandolfo: Yeah, it doesn't show it in there, but yeah, .hide. Anything on the dom is gonna be a side effect.
>> Bianca Gandolfo: Cool.
>> Bianca Gandolfo: And a big part of functional programming is to minimize side effects as much as you can. Of course, with what we do, we can't be a purist about it, because we have to manipulate the DOM and things like that.

[00:12:04] It's probably core to most of our jobs is playing with DOM. Okay, anything else?
>> Bianca Gandolfo: I think we got all that. Well, no I see one more. Eh, it's okay, we'll skip it. I was thinking, in here. Well, yeah, cuz this is gonna do some, it's gonna select from the DOM, and return a node.

[00:12:31]
>> Bianca Gandolfo: Well, hm, I'm having debates with myself. It's fine.