This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.
Transcript from the "Anatomy of a Function" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Bianca Gandolfo: So now we're gonna move on to functions. What do we know about functions? Let's see,
>> Bianca Gandolfo: Joe, what do you know about functions? Just one thing.
>> Joe: Functions are just small modules of code that try to isolate a certain operation.
>> Bianca Gandolfo: Sure, so you can use functions for encapsulation.
[00:00:33] What about Tanner? What do you know about functions?
>> Tanner: This is kinda the part where the code does something.
>> Bianca Gandolfo: Yeah, yeah, so you could think of it having like a button, and you can hit the button and then it goes and it runs something. Mm-hm.
>> Bianca Gandolfo: Let's see.
[00:00:52] What about Ben?
>> Ben: Functions are objects.
>> Bianca Gandolfo: Functions are objects! Nice, extra points. Let's see, who else wants to go. William, did you wanna go?
>> William: I know that the parameters can be passed in willy-nilly.
>> Bianca Gandolfo: Yeah, so you can pass arguments and there's parameters that hold values.
[00:01:17] Awesome, so these are all true. So the way that I think of functions are, they're an object, just like Ben said. But they're an object that does something. And the fact that functions are objects in JavaScript, is a really interesting concept. The fact that we can assign them to variables, and pass them around as data, which we'll talk about more tomorrow when we get into like, higher order functions, is really, really powerful.
[00:01:42] So that's just a cool thing. And so we can pass them around. And one metaphor that we use a lot at Hack Reactor is, we talk about how a function is a blender. And we say, so a blender is an object, and you can have a factory that makes blenders.
[00:01:58] So if you have some constructor that's making more functions, for example, you could do that. And you can give the blender, I can give the blender to Grace, and Grace can give the blender to Kashore, for example. Or we could set the blender down, put some fruit in it, right?
[00:02:19] Arguments, and press the button and make juice. And so once you press the button, that's running the function, and the metaphor of the button is those two parenthesis. The fancy name for that is the invocation operator, but two parentheses next to each other. And so that's sort of the metaphor of how I think about a function as data, and also as something, a unit that has an action that can be run.
[00:02:44] For the next thing that I've also heard about to describe it is, it takes care of some detail work that we don't then want to be worried about. So it's just a very easy way to do something that then, you know it works. Kind of abstracting it, so I don't have to really worry about well, how does it figure out the cube of x or whatever, it just does it.
[00:03:11] Yeah, yeah, totally, so when we get into more functional concepts, we talk about functions as units of abstraction and actions that we can then combine in interesting ways that could be very powerful.
>> Speaker 6: People think of the properties being the nouns and the functions being the verbs.
>> Bianca Gandolfo: Yeah, absolutely, I like that, so the functions being the verbs and objects being the nouns, cool.
[00:03:35]
>> Speaker 7: And functions are scoped.
>> Bianca Gandolfo: Yeah, functions have scope, that's super, super important. So whenever we call a function, it creates a scope, every time, that's important. Did you have a question Mark?
>> Mark: [COUGH] Yeah I was just trying to figure out, they were asking about nesting in the arrays chapter, do we skip that?
[00:03:53]
>> Bianca Gandolfo: We're gonna get to that.
>> Mark: Okay, that's what they were wondering. [COUGH]
>> Bianca Gandolfo: Mm-hm. Cool. Sweet. So we're just gonna do an overview of the anatomy of the function, really quick, and then we're gonna go into nesting. I just wanted to do something new, and then we're gonna go back and see if we still remember the rules that don't change, and we're gonna apply that to a nest of data structures.
[00:04:20] So here's just a quick anatomy of a function. Some key words that are important. So we have the function definition or declaration, and that includes things like the keyword function, the parentheses, and the entire function body. And I'm sorry for those of you who are color blind. I put arrows to kind of help out there, but I don't know how else to visualize it.
[00:04:44] And so then we have the function name. You can have a function name or you can save an anonymous function to a variable. Both ways you can refer to the function later, just like a variable. Then we have the parameters, which are a and b in this case here.
[00:05:04] A and b. And then our perimeters get values during call-time, they get values when we pass them arguments here. And then call-time is when we have the two parentheses. That's when we press that go button, and we also call that call-time, invoking the function, I don't know, that's all I can think of right now.
[00:05:31]
>> Speaker 9: Do I have, do we have to put var, I mean, do we have to, when we define it?
>> Bianca Gandolfo: No.
>> Speaker 9: We don't, but is that a global scope thing?
>> Bianca Gandolfo: Yeah, its a hoisting thing, so I recommend that you always just say var function name equals function.
[00:05:49] Yeah, it has to do with hoisting and scope, and it can get a little hairy if you're not careful, so