They can be a little bit hard to read but once you understand what is going on, they are pretty handy. They are designed to substitute the anonymous function syntax. Which means for functions with no name, like this one right here. So the first thing you need to know is that they let you get rid of this function keyword. And then you can add the fat arrow right here, right before the curly braces. They also allow you to have implicit returns and that means that if there is only one argument, that argument will automatically be returned by the function without having to include a return statement, like this.
So with fat arrows, you can just rid of that return. Also, if you have a single statement, you can actually get rid of the curly braces. So if you have more than one of these, then you will need the curly braces. Otherwise, we can do something like this. Now, when you pass parameters, if you're passing only one parameter, you can omit the parentheses. Now that means that since we only have one parameter that we're passing to this function right here, we can get rid of the parentheses.
If you have more than one, you do need the parentheses in there. Also, if you don't have any parameters, you will still need the parentheses like this. Let's leave it with an E right now. Arrow functions aren't for everything. We already mentioned that they are specifically for anonymous functions, but also the keyword "this," is not bound like it normally would. So for example in this click event, we are passing the this parameter right here, which normally would take up the value of the node that we're referring to, but in here this is not going to have the proper value so we would need to actually use whatever this variable my node or node is, right now.
So it's not for everything. If you do want to use the this keyword or if you want it to be bound properly, it's better to use the regular function syntax. Let's take a look at how this would work in an existing code example. So let's take a look at some of things that we could do here in order to make these functions use the arrow functions. So here, for example, is an anonymous function so we can use the fat arrow right here and because we're doing that, we don't need the function keyword and because we don't have any parameters, we just need to leave the empty parentheses.
If you had a single parameter, then you could put that and not use the parentheses. Now, technically, this entire thing is a single, sort of, argument. It's just a really long one, so we can get rid of these parentheses, but before we do that, let's go in here and make this also fat arrows, we can get rid of the function keyword, here, and because we're passing along a single parameter, we don't need the parentheses in this case. And this itself is a single parameter, so we can go ahead and put this on the next line.
It may be helpful, let's go ahead and make this super wide, and I'm going to go ahead and hide this sidebar so we have the maximum amount of room. So we will go to toggle sidebar, just to hide that. And it may be useful to actually turn off wordwrap just to make sure that we see as much as we can in one line because this is going to get pretty wide. Right so we don't need this other parentheses right here, we're going to put this all in one line, so I know it's really long, but this can all fit in one line, and again, because this is technically another single parameter, we can actually put this on a line by itself, and we'll put this comma up here, so.
It's very wide, so maybe I'll give you a peak by putting this in toggle wrap, so you can see that it's pretty long, but it's probably better to look at it like this because it will show us everything. Now this other one, we could do the same way, so insert the fat arrow, and I like to do the fat arrow first, before I do anything else, just because that way I can see what I can do with my parameters. So I'm going to take off this function keyword right here, and then again this is only a one liner, so we can put this on the same line, right next to the arrows, and get rid of this curly brace right here.
Alright so let's check this out, I'm going to go ahead and save this, and hopefully everything will work exactly like it did before, so everything's working just fine, now one of the things that I mentioned is that the "this" keyword is not rebound inside, for example, every one of these arrow functions, so we can't do something like this, by putting the "this" keyword here. That will not work. If you do want to use the "this" parameter, then you want to use regular functions.
I'll just leave that as my node. So we can also do is modify this hamburger object right here and what I'm going to do there is actually create a variable called hamburger, and I'm going to make this equal to the node name, and then use an arrow function right here, and because this function actually has multiple lines we are going to need the curly braces right here, and we're also going to need this return statement again because this is a more complex version of this hamburger object.
So let's go ahead and save this, and still everything should work like before. So although you do save a little bit of space with arrow functions, I'm not sure that they are as readable as regular functions. However, they are very popular in a lot of examples, and if a company does use arrow functions heavily, you're going to need to know how to read them when you go for that job interview. Here's a page where you can get more information about working with arrow functions, as well as some related courses with information on how functions and fat arrows work, specifically.
If you have some ideas for this weekly series, and maybe you want to share with me some questions you've been asked, or have asked in interviews, connect with me on LinkedIn or just about any other social media network, like twitter or github, at planetoftheweb.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.