Check out a free preview of the full Complete Intro to Web Development, v2 course:
The "Functions" Lesson is part of the full, Complete Intro to Web Development, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Brian introduces functions, which is a bit of re-usable code similar to how class selectors are used in CSS.

Get Free Access Now

Transcript from the "Functions" Lesson

[00:00:00]
>> Brian Holt: So far, we've just kinda been executing just little statements. If we had to do everything like this, this is actually, there's a term for what we're doing. It's called procedural programming. Again, one of those words that you do not have to remember, it's just kinda FYI. If we had to do everything this way, it would be kinda crappy, right?

[00:00:20] Cuz we'd have to write our programs just entirely like a procedure, and that's far less fun. There's a thing in JavaScript called functions. Which is pretty common, most programming languages have them. And they basically encapsulate little pieces of logic that you can reuse all over the place. So let's just dive right into it and see what it looks like.

[00:00:42] So I have a function here called addTwo that accepts a number, right? So inside of these parentheses, this is all the input that this function would accept, okay? So this one accepts one number, and then it returns that number + 2. So as you might imagine, if I do addTwo(5), what do you think I'm going to get down here for the finalAnswer?

[00:01:12]
>> Speaker 2: 7.
>> Brian Holt: 7, right? Cuz it takes 5, 5 then becomes the number right here. So then it returns 5 plus 2, you get 7, right? I can go down here and say console.log,
>> Brian Holt: addTwo(100).
>> Brian Holt: So what's cool about addTwo now is, I have this function that I can reuse all over the place.

[00:01:43] I write it once, and I get to reuse this function over, and over, and over again. Which is really nice, because then I don't have to rewrite this a bunch of different times. Now, this is totally worthless. There's absolutely no reason that I would write addTwo. I would just normally add two to something, that's not really that useful.

[00:02:00] But you can make these functions quite involved, that do a lot of things.
>> Brian Holt: So here's a really good one. I wrote this function called greet that takes in a firstName, a lastName, an honorific. That's the term for Mr., Mrs., Ms., all those things, Dr., that's considered an honorific.

[00:02:25] And a greeting, and then I return this really long string here, right? So I console.log down here, (greet('Brian', 'Holt', 'Lord', 'Salutations')). And so you can see down here, Salutations Lord Holt! I was having fun. [LAUGH] I'm extremely that pleased you could join us, Brian! I hope you enjoy it, Lord Holt, okay?

[00:02:46] And then down here, I do it with Jack, Sparrow, Captain, and A-hoy. And it says, A-hoy, Captain Sparrow! I feel ridiculous reading this out loud. It doesn't matter, I'm still doing it.
>> [LAUGH]
>> Brian Holt: A-hoy, Captain Sparrow! I'm extremely pleased you could join us, Jack! I hope you enjoy your stay, Captain Sparrow.

[00:03:04] But you can see that here, I didn't have to rewrite that whole string every single time. I was able to use template strings and just plug in the various variables, right?
>> Brian Holt: So does that make sense? See a little bit more how functions can be useful? And they get even more involved than this.

[00:03:21] You can start doing some really cool stuff with them. So let's just kinda brief mechanics. This is, you say function to declare that you're making a new function. This is the name of the function right here. So this is something that you name. And again, try and give this a really descriptive name.

[00:03:38] So greet is a pretty good one, because you know that whatever comes back out of greet is gonna be some sort of greeting, right? Also kind of a rule of thumb, this is not a hard and fast rule, but it's kind of a useful one. Generally, function names are verbs, so, because the function does something, right?

[00:03:55] So greet is a verb. addTwo, you're doing something to something, right? So a function is generally a verb. Whereas variable names are typically nouns, because it represents a thing. So firstName is a thing, lastName is a thing, honorific is a thing. So generally, variables are nouns. Generally, functions are verbs.

[00:04:18]
>> Brian Holt: There's no one, there's nothing that's gonna make you do it that way. It's just a useful practice to get into.
>> Brian Holt: Let's talk about how you call functions. So whenever you invoke a function, whenever you're using a function, the way that you say that is you are calling a function.

[00:04:38] I don't actually really know where that came from. That's just the name for it. Or you can say invoke, but generally, people say call. The way you do that is you put parentheses after it. So even if this took in nothing,
>> Brian Holt: You would just do this.
>> Brian Holt: Let's just say this is 5.

[00:05:01] So even if I'm not giving it anything, you just put empty parentheses at the end to signify that you are calling the function. So that's what those parentheses at the end mean. It means that a function is being invoked. That make sense? Okay, that'll become important later, because you can actually pass around functions as well.

[00:05:24] We'll see how that works in a bit. But you do need to put the parentheses there if you're intending to call it. If I just put addTwo right here, this is not useful. Because actually what happens is, now finalAnswer actually represents the function, addTwo. And it's not actually invoking the function.

[00:05:41] It's a little confusing, but now finalAnswer is actually the function. So I can call finalAnswer, which then will call the function. Again, we'll get there. If that doesn't make a ton of sense, I have a section on this. So make sure you're putting parentheses.
>> Brian Holt: Okay.
>> Brian Holt: Call, yeah, that's called calling a function.

[00:06:10] And just look out for parentheses. Anytime you see parentheses, you know that functions are being invoked somewhere. For example, notice that console.log here, right, you put parentheses there. Log is a function, it's a function that's being called.
>> Brian Holt: Okay, so logOutYourHome, this is another function that I wrote.

[00:06:33] I put my HomeCity, HomeState, HomeCountry. And then I call logOutYourHome here. I call it with myHomeCity, myHomeState, and myHomeCountry, right? And then this gets passed into logOutYourHome, right, as city, state, and country. I'm calling console.log here. But I could have just as easily said logOutYourHome with, I don't know, you could have said Torino, which is in Piemonte, and Italy.

[00:07:16]
>> Brian Holt: You are from Torino, Piemonte Italy. I guess, make that Italia, cuz I did it in Italian.
>> Brian Holt: Right?
>> Brian Holt: So you can either pass variables into there, that works, or you can put strings directly in there. Both of those things work, because myHomeCity represents a string. So that these things, you can put either the representation of it, or you can put the direct raw data in there.

[00:07:42] Both of those work.