Complete Intro to Web Development, v3 Functions
Transcript from the "Functions" Lesson
>> Function is actually a mathematical term, right? If you've done, Calculus before, you'll probably remember seeing things like f(x) = x + 2, right? This is called a function in math. If you haven't, then you can just ignore me for the next second and tell this for my people that have taken calculus before, I did in high school.
[00:00:47] So, an example here is, I have this function called addTwo that accepts a number and what it returns is that same number + 2. I can then call addTwo anywhere, and I can give it something, and what do you think it's gonna do? What is final answer here going to be?
[00:01:06] 7, right? Cuz it's gonna take 5, this number here is going to be 5. It's gonna take 5, it's gonna add 2, and it's gonna return that. So whatever returns back here is going to be final answer, Okay? What happens if I do that again underneath here? OtherAnswer = addTwo with, I don't know, 10.
[00:01:31] And let's say, console.log(otherAnswer). What do you think the second log is gonna be? So I've now made this reusable function, this compacted little bit of code that's usable over and over and over again. This is a fundamental concept of programming, because now we don't have to repeat ourselves.
[00:01:55] We can make these like little utility functions that can encapsulate some piece of logic that we can reuse over and over again. Obviously, addTwo is super contrite, right? I could have just done here, right? I could just put 5 + 2 here, right? And that's the same thing.
[00:02:14] But the concept here that I want you to learn is that you can put logic into these functions and reuse them. So, this is called a parameter, this number thing. It's things that it accepts, right? This here now has a bunch of parameters. It has firstName, lastName, honorific, and honorific is a title, right, that someone has, like Doctor or Lord or something like that.
[00:02:44] And then a greeting. And then it makes the string out of it, right? So it says, greeting, honorific, lastName. I'm extremely pleased you could join us, firstName. I hope you enjoy your stay, honorific, lastName. So if I call it once here with Brian, so Brian will go into firstName, right?
[00:03:04] Holt will go into lastName. Lord will go into the honorific, and salutations will go into the greeting. And I get salutations Lord Holt, I'm extremely pleased you could join us, Brian. I hope you enjoy your stay, Lord Holt. I can then call it again with a different set of parameters.
[00:03:22] Jack, Sparrow, Captain, and A-hoy. So then it would be, A-hoy Captain Sparrow, I'm extremely pleased you could join us, Jack! I hope you enjoy your stay, Captain Sparrow, right? So hopefully, you're starting to see some of the value here, like I could have rewritten this string multiple times out.
[00:03:37] You can imagine this is a hotel bar that welcomes you to stay at your hotel, and it allows you to choose your greeting and call yourself Captain, I guess. But here, I'm encapsulating logics, I don't have to repeat myself a lot. I can kind of just make this template function and then reuse it over and over again.
[00:04:01] So, something that you're probably grasping here is the way that you call a function or use a function. But the terminology of using a function is to call a function is these parentheses. So when you see these parentheses at the end of something, your brain should be going off, that's a function, that's calling a function, it's doing function things.
[00:04:27] So, even in here, what is log? Log is a function, right? And we'll talk about the dot part here in the next section, but that's what log is. Log is just a function that's available to us, Okay? Let's try another one with various different parameters, myHomeCity, myHomeState, and myHomeCountry.
[00:04:57] And you can log out your home by saying, myHomeCity, myHomeState, myHomeCountry. That's gonna call this function here with city, state, and country. It's then going to log out. Directly, you are from city, state, country. Again, I could do it one more time here as well. Oops, And instead of this, we could put, I don't know, you're from Olympia.
[00:05:34] Instead of Washington, or you can be from Minneapolis, Minnesota, right? Or we could go, as you are from, I don't know, Bergamo, which is also in the Lombardi in Italy, right? So, a couple things to demonstrate here is, notice these other functions return things, right? So this returns a string, right?
[00:06:57] You don't really have to really worry too much about that. But I now have a variable called meow. So for example, if I say console.log(meow), it actually just logs out that meow is function, right? Because I didn't put the parentheses here, if I do this, well, even if I do that, it's gonna be undefined because meow doesn't return anything, right?
[00:07:27] But notice, it calls meow twice now, right? To invoke a function, even if it doesn't take any parameters, you still have to put empty parentheses there. But now, meow is this function that I can pass around and use in different places, Okay? So that's all this is doing here.
[00:08:06] Is this arrow function? So, this is just an equal sign and an angle bracket put together, so it looks like an arrow when they're put together. And then my font just combines them together to make it actually look like an arrow. This is just shorthand for writing a function.
[00:08:27] So for example, if chirp took any parameters, this would be, I don't know, birdNoise or something like that, right? So that you would put those parameters here inside of the parentheses. If it's empty parentheses, that just means that it doesn't take any parameters, just like these didn't take any parameters.
[00:08:51] Another question you might ask. Do I put a space here or do I not? Doesn't matter, personal preference. You can notice I didn't put it here and I did put it here. Pure accident. I didn't do it with any rhyme or reason. You can see, for the most part, I'm just writing code.
[00:09:09] I don't really care where that whitespace goes. Some people are adamant, it must not go there, and some people are adamant that it must go there, some people will put all of this together. I would say that's pretty gross, I really don't like that. That's really compact and makes it kind of hard for me to read.
[00:09:25] I tend to put more whitespace because I think it gives it some space to breathe, makes it easier for my eyes to read. We can see down here, you call them all the same way, bark, meow, chirp, they all work the same way.
>> Is the convention always cons for shorthand functions?
>> Nope, you could totally do let here. You could totally do var. All those work. It's a good question. I just do const by default, always, personal preference. You can use let all the time, there's lots of programmers that use let all the time. I would just say it's incorrect to do var all the time now, just cuz it's arguably constant.
[00:10:26] But for now, just know that most of the time that they're the same.