This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.
Transcript from the "Definition" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Bianca Gandolfo: So now we're gonna look over some functions that you may or may not have seen before, and kind of identify the parts of these functions. So we have four of them. Some of them I took from jQuery. Has anyone here done jQuery before? Okay, cool. So a lot of people have done jQuery.
[00:00:26] So the first thing is the function definition, so where do we see some functions defined?
>> Bianca Gandolfo: So let's just go in a line, let's start with the front, this way.
>> Speaker 2: At the top there's an anonymous function assigned to nameImprover.
>> Bianca Gandolfo: Yeah, so we're defining a function here.
[00:00:49]
>> Bianca Gandolfo: And then, Rich?
>> Rich: We're looking for where we're assigning functions?
>> Bianca Gandolfo: Where we're defining functions.
>> Rich: We're defining functions?
>> Bianca Gandolfo: It could be assigned a variable, it could be anonymous.
>> Rich: And not being, the body height not down there.
>> Bianca Gandolfo: Right there, that's our next one. We're defining a function there, and it has no name.
[00:01:16] That's okay.
>> Rich: That one doesn't have a name?
>> Bianca Gandolfo: Yep, there's no name.
>> Rich: It's just passing.
>> Bianca Gandolfo: So it's a function definition. It's also an argument. Yeah. And who sees the last one, Tanner?
>> Tanner: There's a function and you click there.
>> Bianca Gandolfo: Right here, function definition. So these are the function definitions in this code.
[00:01:42] And just for clarification nameImprover function is this handy function that we use. I it for when our friends have babies or they have names that need to be improved. ('body').hide() is a jQuery thing that's just gonna hide the body. So if I just did, goes to here. Wait, is there even jQuery?
[00:02:06] Yes. No there's not jQuery. Let's see if it works.
>> Bianca Gandolfo: Cool, so it does work. So, body dot hide, will just hide it, and then dot show will show it. And then array.forEach, forEach is a native iteration method, it's gonna just loop over the array and call this function a bunch of times.
[00:02:31] And then button on click is another jQuery functionality, and it's just adding an event listener, so whenever you click on the button it's going to counsel log this. This, don't press my buttons. So that's just an explanation of what functions we're looking at right now. Cool. And so what about function names?
[00:02:55] And I use name a little bit loosely. I refer to both as the function, the name function as well as a variable that has a function stored at. So let's talk about, where do we see function names? So can we start with just Grace, and we'll just keep going, so you can anticipate when you have to go next?
[00:03:14]
>> Grace: I don't see a name.
>> Grace: Forward function?
>> Bianca Gandolfo: Yeah, so like here, for example, would be a name.
>> Grace: Okay.
>> Bianca Gandolfo: Mm-hm.
>> Grace: That's the name for the function versus the variable.
>> Bianca Gandolfo: Yeah, well, it's variable. I'm using name here loosely to mean both the variable name that it's stored at and the name itself.
[00:03:39] Yeah, cuz there's another way. We could write function like this, function nameStaySame.
>> Bianca Gandolfo: So this is another one. This is just a really complicated algorithm that will just keep your name the same versus this other one. That will change your name and make it better. This is another way to name our function.
[00:04:15]
>> Speaker 3: Is that the same as the first decoration of a function where, in the sense that you're adding [COUGH] in front of it versus adding it to the global, I don't know if that make sense.
>> Bianca Gandolfo: So when we name-
>> Speaker 3: So you never wanna do that one that you just did the stay name.
[00:04:37] I don't know.
>> Bianca Gandolfo: You could do it this way. The only thing about doing it this way is that your function name and definition is hoisted, and that can be, it can get messy.
>> Speaker 3: Yeah. [COUGH]
>> Bianca Gandolfo: So, it can get messy, so I would just recommend that you always just use this one cuz you know that the rules for variable hoists in things are the same and you don't have to keep track of this and-
[00:05:06]
>> Speaker 3: [COUGH] Okay.
>> Bianca Gandolfo: Yeah, there's some situations like if you have two functions of the same name in the if else statement and then you run it after the if else statement. Then it can get mixed up and do things that you don't expect because of the hoisting works in this case.
[00:05:23]
>> Speaker 3: Okay.
>> Bianca Gandolfo: Mm-hm. So, you can do it but you just have to be careful. But just to be on the safe side, just always do it this way, it's not gonna hurt you it's just var, use one extra word it's not gonna make a big difference. So, okay.
[00:05:41] So back to where we were. Here's a name. Then we also have a name here. And then William, see any more names?
>> William: You just added one called nameStaySame.
>> Bianca Gandolfo: Mm-hm, what about any other ones?
>> William: I dont see any other ones.
>> Bianca Gandolfo: What about hide? That's a name, right?
[00:06:06]
>> William: Yeah, yes.
>> Bianca Gandolfo: Cool.
>> Bianca Gandolfo: Kim, do you see any name?
>> Kim: On.
>> Bianca Gandolfo: On. Absolutely. On is a name. And, Andy?
>> Andy: ForEach?
>> Bianca Gandolfo: Yep, forEach is a function name.
>> Bianca Gandolfo: Joe?
>> Joe: Log.
>> Bianca Gandolfo: Yeah, log.
>> Bianca Gandolfo: Let's see, are we missing any? There's one more. It's kind of a trick question, though.
[00:06:41] Anyone see it?
>> Kim: The dollar?
>> Bianca Gandolfo: Yeah, yeah, a dollar sign. So this jQuery dollar sign is actually a function. It's not a special syntax, it's just a function. So you can imagine that jQuery somewhere in its library says var $ = function. And then you know it returns like a jQueryObject somewhere, right?
[00:07:08] Oops.
>> Bianca Gandolfo: More like this. So, some things that may seems a little different, they're actually following the same rules. And I find that very comforting actually, to know that. That jQuery isn't doing something like totally crazy that, I don't understand.