JavaScript: From Fundamentals to Functional JS, v2 Anatomy of a Function

Transcript from the "Anatomy of a Function" Lesson

[00:00:00]
>> Bianca Gandolfo: I left you with a prompt, what you think is the most important thing to know about JavaScript? Loosely held opinions, what did your friends say? How about Jamie?
>> Jamie: I totally forgot, I was hoping you wouldn't call my name.
>> Bianca Gandolfo: [LAUGH]
>> Group: [LAUGH]
>> Jamie: Something about not mutating scope, right?

[00:00:18]
>> Speaker 4: Yeah, not mutating shared data.
>> Bianca Gandolfo: That you shouldn't do that?
>> Speaker 4: Yeah.
>> Bianca Gandolfo: Yeah.
>> Speaker 4: You can either change data, or you can share it, but don't do both.
>> Bianca Gandolfo: Yeah, cool, I like that, that's an important thing to know in general. Cool, how about Eddie?
>> Eddie: [COUGH] So Cameron talked about how JavaScript is everywhere, in absolutely every browser.

[00:00:45]
>> Bianca Gandolfo: Mm-hm.
>> Eddie: And then Chris talked about knowing how to read with documentation.
>> Bianca Gandolfo: Yeah, that's a skill. Some people think, they glance at the documentation, they don't understand it, that they'll never understand it. And that they need to watch YouTube videos, or something. Most documentation is structured, it's very similar.

[00:01:05] And once you kinda get the idea of how to read the documentation, your life gets so much better. And then you start reading the source code of your favorite libraries, then you start reading the language spec, it just gets deeper and deeper, maybe not. But that's what I like.

[00:01:23] Cool, what about here in the front row, the gray, and black sweater crew?
>> Speaker 6: I think we both are just brainstorming an idea of how, first of all, how deep that question is. And what applies to any language would be just trying to understand, how is that language intended to be written as, as for as the best practice?

[00:01:54]
>> Bianca Gandolfo: Mm-hm.
>> Speaker 6: Which I think you and I agree with the idea of trial and error. And also trying to develop our knowledge as we are getting more experienced with whatever language we're writing.
>> Bianca Gandolfo: Mm-hm, cool.
>> Speaker 6: That makes sense?
>> Bianca Gandolfo: I like that. She's like, I didn't say that.

[00:02:15] [LAUGH] I was eating a donut in my break, I wasn't talking about JavaScript.
>> Group: [LAUGH]
>> Bianca Gandolfo: What about you guys?
>> Speaker 7: He said, what was your name again?
>> Dan: Dan.
>> Speaker 7: Dan said that it does crazy things.
>> Bianca Gandolfo: Yeah, yeah, I like to think of it as, know what can go wrong.

[00:02:35] It's one of the most important things to know about JavaScript, is know what can go wrong. Because things are definitely gonna go wrong, and being able to anticipate those things ahead of time will help you write bug-free code, especially with something as crazy as JavaScript. Awesome, so we're gonna start talking about functions.

[00:02:56] I threw you guys in the deep end, we already have been using a lot of functions. We already implemented map, and Each, and filter, and used them. But we're gonna go into the specifics on how things work, so we have a super clear idea on how exactly our code executes.

[00:03:13] I think that's really important. The order in which things execute, and trace things through, functions and values, as they go through our code. All right, so I'm gonna give you guys a little bit of an anatomy lesson. And then I'm going to let you guys do a scavenger hunt on the next slide, just for a couple of minutes.

[00:03:39] And we're gonna come back, and we're gonna talk about what we found. So the anatomy here, I wish I could stand up and point, but I'll use my mouse, is there are many pieces of a function. And a couple of pieces that are confusing to people, especially, are the difference between defining a function, and invoking a function, or calling the function, right?

[00:04:06] So when we define a function, it's static, it's not been run. Anything in the body of the function, which is in between these two curly brackets, does not run until call time, or when you invoke it. And you only invoke it using curly brackets, or using a method like, call or apply, something like that.

[00:04:27] So if you don't see these brackets, this function never runs. Seems obvious, but something that we often forget. And we're like, why isn't this doing anything? And you're like, well I didn't call the function. Or this function, the name I"m referring to is misspelled. Sometimes I write the word function wrong, I like to switch the C and the N, is there anyone else that do that?

[00:04:50] Fucntion, yeah, that's how I roll. So we have a function name, we have the parameters. The parameters are variables, right? They don't hold a value until it's called. And the arguments are what you pass to the function, they have values. So we often use these terms interchangeably, but they do mean different things.

[00:05:14] So just keep that in mind. Parameters are variables, they have no value until called, arguments are the actual value. It gets a little bit tricky when we're kind of walking through the function, and the parameters have a value. But just keep that in mind that they're different. Okay, any questions about this little chart, anatomy of a function?