Arrow Functions Exercise

[00:00:00]
>> So now we're going to try out our new syntax. What we're gonna do is write very similar functions to the three functions that we just wrote with the function keyword. Where we had multiply, yell, and longer than. We're gonna write the functions divide, whisper and shorterThan that kind of do the opposite of those things.

[00:00:20]
And this time when we declare these functions, we're gonna use this arrow syntax, okay? So let's take a few minutes, try to work through it and then we'll talk about the solutions together. And this time you have to use arrows. So, this time we're doing, instead of multiply we're doing divide and we're using arrows.

[00:00:41]
So let's go back to our console, who would like to talk me through their multiply solution?
>> I think divide.
>> Sorry, divide, their divide solution. [LAUGH] Yeah, OJ?
>> const divide = (x, y) => x / y.
>> x and then divide is which operator?
>> /

[00:01:06]
>> / y like this?
>> Yes.
>> Okay and so now if I divide, I don't know, 9/3, sorry, divide (9, 3) we should get 3 yes. And [LAUGH] 9/3 divided by undefined is not a number. [LAUGH] Great, okay, how about the next one was whisper, so, the opposite of yell.

[00:01:32]
This time we're gonna take in an uppercase string and log it in lowercase to the console using an arrow function, Paul?
>> Okay, so const whisper = and then in parentheses, (text).
>> Sure.
>> And then the =>
>> Yep.
>> And then it's text.toLowerCase with parentheses.
>> Like that, okay.

[00:01:59]
>> Parenthesis, it didn't work. It just came out and said, hey, this is a function. [LAUGH]
>> Yes, exactly So there's a difference between properties and methods. We talked about properties on objects point to things, right? And so when we use just the dot with no parens, the dot and the name and no parens.

[00:02:20]
We're pointing to the thing that this property points to which is a function. If we wanna actually use that function we have to use the parens. Okay, so now this if I whisper("OMG") we're going to evaluate that to the expression OMG. Which for example I could capture as, I don't know, as a output as a new variable.

[00:02:56]
Yes, so this is great for returning the lowercase version of the string. But what I also asked us to do is log it in lowercase to the console. So this would require us to do something a little bit different. This is also a valid function, it just does something a little bit different.

[00:03:15]
This returns us the value. What if we wanted a version of this function that doesn't actually return the value but logs it to the console instead using a fat arrow? So I'm gonna make a whisper2. Any guess how we do that? Paul, do you wanna take a stab at it?

[00:03:32]
>> So we're doing both, we're returning and printing out, or just printing?
>> We can just print out for now.
>> Okay, so it's the same thing, you do text, and then the fat arrow function, and then just console.log
>> Okay so console.log.
>> And then the text.toLowerCase.

[00:03:53]
>> toLowerCase, okay so now if I whisper2("OMG") we get out the value. And in this case, the return value of this function is gonna be what? If I were to do let output1 = whisper("OMG"), what do you think output2 is gonna be? Undefined, okay.
>> You ran the wrong one, you ran.

[00:04:29]
>> I ran whisper instead of [LAUGH] good call, okay. And this is why we use let is because we can resign them. Okay, so now output2 should be what we expect which is undefined. Okay, what if we wanted to do both? What if we wanted to both log and return?

[00:04:47]
I see Jason nodding, do you want to take a stab at this one? We could make a whisper3, let's say
>> Yeah, so we would-
>> Sorry, I'm just gonna clear this out here. Okay, so whisper3.
>> Yep, so basically the same thing we had before with the exception of adding and opening curly braces.

[00:05:08]
>> Curly braces, exactly. So now I wanna do two things, I wanna have multiple lines of code. So now I would have to do?
>> You could console.log it here and then you could, well actually, what I did was I assigned it to a variable. Once I converted it to lowercase, I put that as a variable.

[00:05:27]
And then I console.log the variable and then I returned the variable.
>> Great, let's walk me through it just so we can go through that a little slower.
>> Sure, so const, whatever we want to call it, lc for lowercase or whatever.
>> Sure.
>> = text.toLowerCase, yep.

[00:05:45]
>> Okay.
>> So we would console.log, on the next one, we'd console.log and then put lc, and then return lc.
>> Right, so in this case, if I wanna avoid repeating myself with text.toLowerCase, text.toLowerCase, blah, blah, blah. We can use variables, that's exactly what variables are great for is remembering the thing.

[00:06:03]
And then I can reference that variable in my function body. And we just need to remember that return keyword if we're using a curly braces function body. So now if I do, let, I can't remember what it was, result3 whisper3("OMG"). So now I see OMG got printed out to the console when I called whisper3 and result3 is also the value of the string.

[00:06:30]
Great, excellent work, everybody. Okay, last one, shorterThan, this is where we're gonna take 2 arrays. And in this one, I would say let's use the approach where we're returning the value of the operator, the expression using greaterThan. So, without trying to use the if else, can anybody walk me through their solution, Chu?

[00:06:53]
>> const shorterThan =
>> Sorry, one second, let me make some room here. Okay, const shorterThan =
>> = (a1, a2)
>> a1, a2 great.
>> =>
>> =>
>> a1 > a2.
>> Okay, so a1 > a2. Where in this case, these two items, which again JavaScript doesn't care what we pass in.

[00:07:22]
But we know that we're gonna be passing in arrays. And what we just want to do is make sure that the > operator does what we expect on arrays. So what we want to know is how many things are in the array? So let's try this out, shorterThan, what do we have, 1,2 and I don't know 1,2,3.

[00:07:50]
And in this case, we're maybe getting something a little bit different than we expected. Let's figure out what's going on here. So if I have an array > some other array, this this operator is not working the way I expect it to. As it would for example if I asked if 4 or a silent 2 is > sorry, am I using the wrong direction, yes.

[00:08:26]
Yeah, I think I typed this wrong the first time. We want shorter than, so we want to know if it's less than. [LAUGH] My bad. Let's try this this way, okay so 1,2 < 1,2,3. Okay, there we go [LAUGH] that's what's happening. All right, great, so I think what happened is I just typed the wrong character here, great.

[00:08:45]
[LAUGH] It happens to the best of us. Did anybody have a different solution? Yeah.
>> Can you use the .length to make sure that you've got the actual length of the array?
>> Yeah, so we could also use the .length and in this case, I'm gonna write the right operator.

[00:09:07]
[LAUGH] So we could use a1.length > is that what I did the first time? a2.length, is that what you meant? Great, and of course I didn't even remember to name this shorterThan2, but thankfully JavaScript is reminding me that I already declared a shorterThan. So I can't redeclare it, so shorterThan 2, too short too furious, is going to be [LAUGH] let's say if we do 1,2 and then 1,2,3, or 1,3,3, it's also going to return what we expect.

[00:09:38]
And this time I typed the operator in the right direction. So okay, so these are now equivalent, essentially.