Arrow Functions

[00:00:00]
>> WebDevSimplified: So that out of the way, we can move on to JavaScript being confusing again because not only can we create functions normally, but JavaScript always has to have two ways to do everything. So we have the idea of arrow functions, which is just another way of creating functions, and of course they behave slightly differently. So an arrow function is very similar to a function, and converting from a function to an arrow function is not too tricky.

[00:00:21]
So I'm going to take this normal function, which is a sum function. We've seen this a million times, and I want to convert this to an arrow function version. So to convert a function to an arrow function, all we do is replace the function keyword with const because now we're essentially creating a variable. So we can say constant, and then we just put whatever the name is. So in our case it is sum.

[00:00:40]
We'll call this one sum arrow, so they are different from each other because you can't have two functions with the same name. So now we've replaced that function keyword with a variable constant, and remember with variables when you give them a value, you need to set them to a value with that equal sign. So we then place the equal sign. Now since we want to set this function or this variable to a function, we need to give it parameters inside the parentheses.

[00:01:02]
So we essentially take this entire parentheses section up here and we use that down below. So we would say A, B, just like that. Now we need to use the curly bracket section just like this to define what our code looks like. But this is where the arrow function name comes from. In between the parentheses for your parameters and the curly brackets for your code definition, you're going to put an equal sign followed by a greater than sign, which kind of looks like an arrow.

[00:01:26]
Hence the name arrow function came from this particular line of code. Then we can write out whatever our return is, so we can return A plus B just like that, and this essentially converts a normal function into an arrow function, and these two things are going to work just the same for when we actually use them. So I can come down here, console.log my sum function passes in 1 and 2. You can see it prints out 3 on the right hand side of my screen, and we can do the exact same thing, and I can do my sum arrow function.

[00:01:55]
Let's pass it in here, 2 and 3, so we should get 5 printed out and you can see it prints out 5. So they both work exactly the same. It's just two different sets of syntax for defining the exact same thing. And again, when you're defining an arrow function, you're going to be replacing that function keyword with the constant keyword. Then you use the exact same section for your name, followed by an equal sign because variables must have a value that they're equal to.

[00:02:17]
And in here, the only difference from the rest of your function is you separate your parameters from your function body with an arrow, hence giving it the name of an arrow function. Yes, there are cases where you never use let or is it always constant? Technically you can use let, but I would never use let because let is a variable you redefine, and for the most part a function is probably not something you're going to redefine.

[00:02:37]
But yeah, if you use let and I just save our code, you'll see it works exactly the same. So you can use let, but I would say 99.9% use cases const is going to make a lot more sense because functions generally don't get changed around like that. Moving on a little ways, there's a few unique things about arrow functions that make them different from normal functions. First of all, when you have a single parameter, just one parameter, no other parameters, you can actually leave the parentheses off.

[00:03:00]
They're completely optional. Now this is generally a little confusing, so by default, Prettier will actually leave those parentheses in there for you. So let's say that we had a function, we'll just copy over the one here, which is print name. There we go. We have this print name function which takes in a single parameter of name. I could actually leave those parameters off, and the way I have my Prettier set up is to automatically remove them, but yours with the default settings will actually probably leave those parentheses in there.

[00:03:26]
So you can either leave those parentheses in or you can remove them. Both of them are going to work exactly the same. So a little bit of a quirk of arrow. They're optional, but it's only optional if you have one single parameter. If you have multiple parameters, it's required. If you have no parameters at all like this, it is still required to have those. It's only optional when you have exactly one parameter.

[00:03:44]
And again, by default Prettier will add those parentheses in for you just to make it more consistent. But you may see code without them, so that's why I wanted to specifically mention this. Now another thing that's a little bit important to understand is they have a little bit of a shortcut called a single line return. Let's go back to our sum function that we had before because this is going to be a great example of this.

[00:04:03]
And normally when we write out our code, you can see we write the keyword return followed by whatever we want to return, and we do that inside of these nice curly brackets. But arrow functions decided they wanted to be even more confusing at how they work, and they allow you to have an arrow function that is on one single line and it'll automatically return whatever you put on that line. So in our case, instead of having these fancy curly braces with this return keyword, we can get rid of all of that and instead put our entire thing that we want to return on one single line with no curly braces or return keyword.

[00:04:35]
So if I just say A plus B, this code is actually exactly the same. We can call that code. Pass it in a sum of let's say 3 and 4, and now if I give it a save, you can see it prints out 7, and that's because with an arrow function, if you have one single line of code like this, it's going to take whatever is on that line directly where you have that arrow, and it's just going to assume you want to return that and automatically return that for you.

[00:04:55]
Now if you have multiple lines of code, this isn't going to work, so it's only for specific scenarios we have one single line and you want to return that particular piece of code. This may seem like a really niche use case, but it's actually something that comes up a lot more often than you think inside a JavaScript. So understanding how this works can make your code a little bit smaller and more concise when you write it.

[00:05:14]
But if you find this way of writing code confusing, there is no problem with just using the normal return keyword like this. They work exactly the same. There are no differences between writing it one way or the other way. It's entirely personal preference. But as you get more comfortable with arrow functions in JavaScript, you may start to revert to this single line way of doing things just because it's a little bit more concise.

[00:05:35]
And as you've seen it more and more, it'll start to make more sense. Now some common mistakes you'll run into, this is probably the one that I make the most myself, is when you have this single line section right here, you accidentally still put the return keyword in there. This return keyword is automatically implied. If you put it in there, it'll actually give you an error inside your code. So you need to make sure if you're doing this single line way of doing things, you completely remove the return keyword.

[00:05:57]
Another common mistake is you have a function like this that automatically returns, and then you realize, you know what, I actually want to add some more code to it. And to add more code you need to add the curly brackets. And let's say I put in some more code inside of here, we'll just do a simple console.log, whatever, and you forget to put the return keyword here. So now we're no longer returning A plus B.

[00:06:15]
You want to make sure you still put that return keyword back in there. So sometimes when you start swapping between these two methods, just make sure if you're using the curly brackets you have return if you need it, and if you're not using the curly brackets, the return keyword is automatically applied for you. Another thing that's really common is you just forget to put the parentheses, especially when you have it set up so it only uses the parentheses when you have multiple parameters.

[00:06:37]
For example, in my case, if I have just a single parameter here, it'll automatically remove those for me. And now if I add another parameter, it's going to, you know, start giving me errors. You need to make sure that if you're using multiple parameters, you have those, or if you have no parameters, again, you need to make sure those parentheses are there. Those are really common mistakes that happen when you start refactoring and changing your code, and then you start adding or removing parameters.

[00:06:58]
It can be confusing to keep up with everything. So now you're probably wondering, OK, now JavaScript has two ways to define functions. We have multiple ways to define variables like why would I want to do all these different weird things? Arrow functions, in my opinion, have one very specific use case. You can use them anywhere you use a normal function, but the way I like to use arrow functions is when I'm passing them along as functions inside of other functions.

[00:07:19]
The nice thing about functions in JavaScript is you can create what's called an anonymous function. This is a function that has no name. So let's just take this code so we can take a look at it, we'll copy that over, take a look at a little bit more in depth inside of Visual Studio Code. You'll notice that here we're creating a function and we're not passing in a name. This is called an anonymous function.

[00:07:37]
In JavaScript, any function can be created anonymously with absolutely no name. You generally do this when you're creating a function in line. For example, here we're creating a function to pass along to process data that'll do something with our code. Now the problem with doing it with a normal function like this is we need to put this function keyword in front of it, which can get kind of bulky and verbose in the actual code that we write.

[00:07:57]
So this is where I personally find arrow functions really useful. If you're to find a function directly in line that's an anonymous function with no name, if we look at the arrow function version, you can see the code is a little bit more concise. I don't have this big bulky function keyword in here. The only thing I have is this tiny little arrow, otherwise everything is just an inline function that I can use.

[00:08:16]
And since callbacks, passing functions to other functions are so common in JavaScript, you'll see this pattern of passing along arrow functions that have no name to other functions all over the place in your code. I can even simplify this further and put it on one single line like this, and it's going to work just fine, exactly the same as what I was doing with these other ones. All three of these pieces of code do the exact same thing, but you can see some of them are a little bit more concise.

[00:08:37]
Some of them are easier to understand. But again, it's personal preference which one you want to use, because you can use this function way of doing things. You can use the arrow function way or you can even just define a brand new function and pass that on. It's entirely personal preference. Is there a way to require inputs or parameters of any kind, or is it all like, can I pass as many as I want, use them whenever I want?

[00:09:01]
Oh, so you're saying like define a way for it to like throw an error if you pass no parameters. So inside of JavaScript, there's really no good way to require the parameters to show up. I mean, obviously if I pass in more parameters or less parameters than there are available, it won't work like I expected to, but it won't throw me like an error. Like if I put in some bogus variable here, if I just spell something correctly, you'll see I don't get any errors in my code even though it doesn't do anything with that particular variable.

[00:09:25]
So there's really no good way to say, OK, this function has 2 parameters, this function has 3 parameters unless you're using something called TypeScript. There's actually a lot of really great TypeScript courses on Frontend Masters. I'd recommend checking out maybe after this if you want to check them out. But TypeScript is like another level of JavaScript. It's essentially built on top of JavaScript that allows you to say, hey, this function takes one parameter, and then it's a number or it takes two parameters, you know.

[00:09:47]
So if you want to get that extra level of granularity, you're going to need to use TypeScript instead of JavaScript. So when it comes to when to use arrow functions, since I said you can use either one you want, it's really up to personal preference. I'll tell you my preferences, but again, you can define your own preferences. I personally like to use arrow functions when I have a really short and simple function that I'm passing along as a callback to another function.

[00:10:09]
That's pretty much the only time that I use arrow functions when I'm defining an inline, anonymous function that's not too complicated, you know, maybe it's a few lines of code like this. Once I start to get a function that's more complicated or I want to give a name to a function, I just default to using the normal function keyword we talked about already inside this workshop. So most of the functions in my code are going to follow this normal function syntax, but you know, when I have something really small and in line, I'll throw it in an arrow function.

[00:10:34]
But again, it's personal preference. Some people only use arrow functions. Some people only use normal functions. You just need to find what works best for you. And if you're working on a team, they'll generally have some type of standard you should follow for where they say arrow functions are better versus normal functions. So really it's entirely up to your personal preference and the preferences of whatever team you're deciding to work on.