Learn about the new function syntax called arrow functions, which allow you to concisely declare new functions.
- [Instructor] ES6 introduces a new way to make functions that will change how most of your code looks and operates. While the function keyword is still a completely valid way to declare a function, arrow functions have been introduced, which clean up the function declaration syntax and change some of its properties. When declaring a typical function you would use the function keyword, an optional identifier for later use, and then a function body that will execute when the function is called. For everyday functions this type of declaration is not too painful.
Where I find myself getting tired of the sytax is when passing functions as arguments to other functions, especially when the function is anonymous. Even though anonymous functions don't have identifiers you still need to use the function keyword, as well as any arguments in the function body. This extra syntax can make your lines of code quite long and difficult to scan easily. Arrow functions have a much simpler syntax, which makes using them anonymously much easier. An arrow function begins with an arguments list surrounded by parentheses, next there is what's called a fat arrow created by an = and a >.
This is really the key piece, it's where arrow functions get their name and what indicates that an arrow function is being created. Then you have the function body, which is the same as other functions. As you can see in this example, arrow functions are anonymous. This means that they are created without an identifier. To call an arrow function by an identifier you would need to assign the anonymous arrow function to a variable, like this. Now the arrow function can be called normally like any other function.
Arrow functions shine when being passed as arguments to other functions. Removing the function keyword really saves some space in your code and looks much cleaner in my opinion. Indeed, this is the most common way I find myself using arrow functions in Node.js applications. There are a few additional changes that come with arrow functions. First, if you only have one argument for an arrow function you can omit the parentheses around the argument. If you have more than one you need the parentheses. And if you have no arguments you also still need the parentheses.
While I personally like this optimization it quickly became a bad practice in the Node.js community due to the possibility that a fat arrow could be typed accidentally when a greater than or equals may have been intended. We'll practice this optimization in this video, but I wanted you to be aware of the community opinion about the feature. Another optimization arrow functions allow are in relation to the function body. If an arrow function only has one expression in the function body you can omit the curly braces.
More than one expression in the function body and you need them. And it goes even further. If you omit your curly braces you can also omit the return statement. The arrow function will return the value of the single expression in the function body. Now let's modify some functions in our demo. There are more functions in this project than we could possibly change during this video, so we'll only look at modifying a few. You may want to work your way through the demo project converting the rest just to get practice with the new syntax.
Let's start in server.js, which is the main entry point to our application. We're looking for any ES5 function usage to convert to ES6 arrow functions. And on line 24 we are calling the server.register function and passing in a callback. This is a perfect candidate for turning into an arrow function. To do that we would remove the function keyword, which will leave us with the err arguments. After that argument section we'll add our fat arrow, the = and the >.
And since the argument list only has one argument we can remove the parentheses. Remember this is considered a bad practice, but I wanted you to be aware. Now that's all we need to do to change this callback function, which starts on line 24 and ends on line 41, that's all we need to do to change this regular function to an arrow function. We can do another one on line 37. We call the server.start function and pass in an anonymous function.
To change this to an arrow function we remove the function keyword, can also remove the parentheses. And then we use our fat arrow to indicate our arrow function and the function body stays the same. And that's all we needed to do to modify that function to be an arrow function. Now let's try another example that's a little more complex. Open up fluxGen.js, which is in our lib folder. The fluxGenerator function is declared and then assigned to the module.exports property at the end of the file.
Let's change this function to be an arrow function. To do this we'll start by removing the function and fluxGenerator identifier. Because the arrow functions are anonymous we don't want to create a variable at the top of the file and then assign it at the end. We can directly export it on line 1. So to do that we will reference the module.exports property and then assignment. Our arrow functions start with the argument list, so we've already got that here on line 1, and we just need to add our fat arrow to create the arrow function.
Now we're exporting on the first line, so we don't need the code anymore on line 19, so you can remove that, and line 18. And since this is an assignment instead of a function declaration we do need a ; at the end of line 17. It's not really that hard to convert functions to arrow functions and I think it really cleans up the code and removes the necessity to have a function name, but there are a few other changes in arrow functions aside from the syntax and we'll look at those in an upcoming video.
- Using arrow functions
- Using default parameters
- Reviewing the class structure in ES6
- Assigning variables with let and const
- Array destructuring and object destructuring
- Replacing callbacks with promises
- Keeping values unique with Set
- Dropping the prototype with Map
- Working with generators
- Using yield with arguments