Arrow Functions

[00:00:00]
>> And there's actually another way that we can make functions in JavaScript, that we call arrow functions, like our, I don't know, everybody's favorite archer, Katniss Everdeen. [LAUGH] So arrow functions are so named, because they use this operator or symbol here that is like, it's called a fat arrow.

[00:00:20]
It's the equal sign and then the greater than sign that sort of makes a little arrow picture. And so the fat arrow here lets us create what we call an arrow function, which is an unnamed or anonymous function that usually doesn't have much code going on. So this is sort of a quick way to create small simple little functions.

[00:00:44]
So for example here, we have a function that adds two numbers together, that is similar to our add function that we looked at in examples earlier, but is anonymous. It doesn't have a name, and uses the arrow syntax to declare the function. If we, If we assign this to a variable like add, we essentially get the same thing, the same behavior as if we had declared the function with the function keyword and with the return keyword, and named the function add.

[00:01:22]
So these two pieces of code are equivalent, we could say So let's break down what's happening. So in our function keyword, function expression here, non-arrow, we add the name of the function, the parameters and params, the curly braces, the return keyword, and then the expression whose value we want returned.

[00:01:51]
In our arrow function, we still have all that same stuff, it's just much shorter because we're skipping some of these keywords. So the arrow is sort of doing the heavy lifting of the function keyword. The assignment to the variable add is doing the naming work. And then the params here to the left of the arrow function are declaring the parameters of the function.

[00:02:19]
And on the right-hand side of the arrow is the return value, which usually in arrow functions is just one expression. So in this case, we're returning x + y, so same in both cases. And if we wanna prove it, we can go back to our console, We can, my goodness, We can declare our add, and I hopefully haven't.

[00:02:49]
We can check that add is a function. Yes, add is a function, and we can check that it works as we expect. Indeed it does, cool? So this is a handy little syntax for when we just want a function that returns a value and doesn't do anything else.

[00:03:06]
It's not logging anything, it's not doing any complicated math or manipulations. We only have one line of code in the function and it is return statement, and it is returning a value. So this is a great little shorthand for when we have a simple function that we just want to return a value, cool?

[00:03:29]
And if this function only takes in one parameter, I don't even need to go to the trouble of typing parentheses around the input parameter. That's optional. I can have parentheses around the input, but if it's only one thing, I don't even need to write parentheses. And as programmers, we're often very lazy and we can't bear to spend more milliseconds writing characters than we absolutely have to, so some folks find this handy.

[00:04:04]
And if we need multiple parameters, we do have to enclose those parentheses. Because otherwise, JavaScript wouldn't know that we're saying, kind of similar to how we group things when we're doing math with our math operators. We're saying, hey, this is the group of the parameters. And that's how we tell JavaScript, everything to the left of the arrow in these parentheses, these are the input parameters.

[00:04:25]
And everything to the right of the arrow, this is the expression I want you to return the value of, cool? Okay, questions so far? Yeah,
>> You can use the fat arrow with longer ones too and use parentheses or curly braces, can't you?
>> What a great point you make.

[00:04:50]
If we do need to do more stuff in our function than just return a value, we actually still can do that with arrow functions by on the right-hand side, [LAUGH] on the right-hand side of the arrow, putting curly braces. And that sort of gives us what we could think of as a normal function body.

[00:05:15]
So if we do wanna do other things, like maybe console log something, let's say, before we return the value, then we can use curly braces on the right of the arrow to indicate a longer function body. But in that case, we need to remember to return with a return keyword.

[00:05:33]
So at this point, we're starting to lose some of the value of switching to the arrow syntax to save key strokes if that's what we're after, if we're code golfers, [LAUGH], but we still can do this if we want to. Question.
>> Is there something with this keyword with arrow functions versus a normal function?

[00:05:57]
>> Yes, there is something with the this keyword. Yes, so there are other differences between arrow functions and normal functions, let's say, or function keyword functions. And one of the differences, so remember earlier, we mentioned that this keyword inside of methods, in objects. And this, as I said, is a dangerous thing to work with, because sometimes it does stuff you don't expect.

[00:06:25]
And one of the things that's complicated about this is that it behaves differently in arrow functions than in function functions. So we're not really gonna go into exactly how it's different and why and when and how to work with that. But our good old friend, MDN, has all [LAUGH] of the information if you really wanna dig into how the this keyword behaves differently inside of the body of an arrow function, versus the body of a function keyword function.

[00:06:53]
So there are other differences than just the syntax between arrow functions and function keyword functions. But for the scope of this course and the in the interest of not giving ourselves what we could call foot guns to trip ourselves up on, we're not gonna get into it. But it's a good point, and if it's something you wanna explore more, check out this, that page on this that we linked earlier.