Functions

[00:00:00]
>> 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:29]
This is called a function, right? So you have x, that's a function of y. Sorry, basically, the f(x) is the same thing as y. It's the same idea here in JavaScript, that given some sort of input you can get some sort of output. And that's really all a function is, given some input, it does a thing.

[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:14]
And then I use that string somewhere else. I don't necessarily have to return anything, right? So this function doesn't return anything, it just does some logging directly. And then here, we're just showing you that you can reuse it over and over again with different parameters. So I wanted to show you in JavaScripts, there's a couple ways of writing functions.

[00:06:35]
So far, you've been seeing me use this one the most. All of these are equally valid, I'm fine with whatever you choose. So, a function bark, which does console.logwolf. You can assign it to a variable. So that's one of the things about JavaScript, you can call functions first class citizens in JavaScript, which is not true of every language.

[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:07:48]
Is it's making a function, and then it's assigning it to meow, and then I can use that later. This is the new way of doing functions in JavaScript as of, again, 2015, which doesn't feel like it's that new to us, but it's very new in terms of the programming language.

[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?

[00:09:46]
>> 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:09]
Yeah, constant are more useful. The one thing I'll say is there are some subtle differences between all three of these, kind of outside the scope of this course. I would invite you to take some of the more advanced JavaScript courses in Fronted Masters, if you're really interested in it.

[00:10:26]
But for now, just know that most of the time that they're the same.