Creating Functions Exercise

[00:00:00]
>> [LAUGH] So what we're gonna do now is just to stretch our function muscles a little bit. Before we go back to our HTML file, we're just gonna stay in the console cuz the console is still a nice place to just test out things really quickly. So what we're gonna do is in the console we're gonna declare three functions, multiply, yell, and longerThan that do these various things.

[00:00:21]
So multiply is gonna take in two numbers, and return their product. Yell is gonna take in a lowercase string or any string and log it in all caps to the console. And then longerThan is gonna take in two arrays and return whether the first array is longer than the second.

[00:00:43]
Which is gonna require us to use an operator that we saw earlier in the course. Cool? et's take a moment, give it a shot and then we'll talk about the solutions Let us walk through our solutions to these three functions we needed to implement, multiply, yell, and longerThan.

[00:01:05]
So let's start with multiply. We're gonna take in 2 numbers, we're gonna return their product. Who would like to walk me through how they implemented this function, multiply? Two, do you wanna show me what you did?
>> Function, multiply, parentheses, a ,b.
>> Great.
>> Curling.
>> Right, outside the curly braces, yeah.

[00:01:32]
>> Return a times b.
>> Return a and then like star, right? b, semicolon. Great. So now, if I multiply, I don't know, 2 and 3, I get 6. Great. Now we'll notice that when we call multiply in the console, the browser is evaluating this as an expression, right?

[00:01:58]
So what happens when we call the function with these two arguments and it's saying all the result of that, return value is 6. Beautiful. Okay, how about yell? Paul, you wanna walk me through yell? Given a lowercase string login in all caps?
>> I started with const.
>> Okay.

[00:02:19]
>> Const yell equals function.
>> Interesting. So we're seeing a new way to declare a function which is by assigning it. It's a function expression essentially assigned to a variable, great. Okay, please continue.
>> And then in parentheses I just did saying-
>> Saying, sure.
>> And then in the curly braces, return saying.touppercase, and then the-

[00:02:45]
>> Touppercase and then parens semicolon. Great. Okay, so now what we have is yell points to a function, which in this case, and when we declared our function here, it looks very similar to the way we've been declaring functions so far, except for there is no name multiply here in between the function and the parameters.

[00:03:16]
So this is what we call an anonymous function or an unnamed function expression, and these are two options that are essentially equivalent for JavaScript. Great. So now if I yell, hello, it logs out HELLO. Great, excellent. Okay, how about longerThan? Who would like to walk me through their implementation for longerThan?

[00:03:40]
So in this one little different, we're gonna take in two arrays, and we're gonna return true or false whether the first is longer than the second. Jason, did you wanna walk me through?
>> Sure.
>> Your solution, [INAUDIBLE]
>> I didn't type it out but I think I can just, [CROSSTALK]

[00:03:57]
>> So function longerThan, and then as our input parameters, we'll have, a1, a2.
>> Sure. We get to name them as we say fit. So you could say array 1 or a 2. You could say left, right. You could say potato, [INAUDIBLE] I don't know, whatever you want.

[00:04:20]
Yeah, [LAUGH] great.
>> And then we would have an if condition.
>> Okay.
>> Maybe there's a simpler way, [CROSSTALK]
>> We're getting advanced, we can totally do it with an f, but-
>> I don't know the exact syntax, but it may be that there's a better way or a different way that you-

[00:04:37]
>> There's multiple ways to do things. I would say if a1 length. Again, I don't know if the syntax is right. But is greater than a2.length.
>> What are we supposed to return which is greater than, so we would say-
>> So we wanna return true if a1 is longer than a2.

[00:05:05]
>> Okay, then return true.
>> And we wanna return false if a1 is not longer than a2. So return-
>> True.
>> True. This is a sneak preview of some stuff we're gonna see later. Okay, so this already-
>> So we're just gonna assume that one is gonna be larger than the other?

[00:05:25]
>> We're basically just going to return true if a1 is longer than a2.
>> Okay, else false.
>> Okay, so then we can have-
>> Else will return false.
>> An else, Return false. Now we're gonna talk about if statements later. So now basically what I'd expect, this is now a function where if I give it 1,2,3 and 1,2, two different arrays, it should say true and vice versa.

[00:05:55]
If I give it 1,2, and 1,2, they're the same, it should be false or 1,2,3. The first one's shorter, so it should be false. So this is totally valid. Totally valid, but it's using this if statement that we haven't even talked about yet. We're gonna talk about in a little bit.

[00:06:11]
There is another way that we could do this. And that is basically related to the value of this expression. So the greater than operator itself, if we have 1, 2, 3, length is greater than 1, 2 .length. The operator itself, is gonna return true, or it's gonna evaluate to true.

[00:06:41]
This expression is going to evaluate to true, if that relationship holds, right? If the first thing is longer are bigger than the second thing. So we could also as another way to do this, we could have another function and maybe somebody else found a solution like, I'll call it longer than 2.

[00:07:00]
We can keep the parameter names the same. Did anybody have a different solution that involves that greater than operator but not the if statement?
>> a1.length greater than a2.length, I mean-
>> Okay a1.length greater than a2.length, like this? Well, return, right?
>> Yeah return, yeah, we can't forget our return.

[00:07:24]
Right, so we can actually just return the value of this expression because that is basically gonna be the same as the true false kind of choices that we've made before. Later when talk about if statements and conditionals, we'll look at what we just did there, so we can also have a longer than 2 function.

[00:07:46]
What's happening? Let me go back up to my call here longerThan2, should also return kind of as we expect, True, if the first thing is longer than the second thing. Great. Okay, any questions so far? Okay. Now there is another way that we can return. So far we've seen two ways we can declare functions.

[00:08:20]
We saw that we can do the function keyword and then the name of the function and then the parameters. Or we saw that example where we had, const equals, let me see if I can find it. Const yell equals and then the function, expression that creates an anonymous function.