The goal in this section is to give you the knowledge to make that choice, and we'll kick things off by creating a new file in the playground folder called arrow-function.js:
Inside this file, we're going to play around with a few examples, going over some of the subtleties to the arrow function. Before we type anything inside of the file, I'll start up this file with nodemon, so every time we make a change it automatically refreshes over in Terminal.
If you remember, nodemon is the utility we installed in Chapter 2, Node Fundamentals - Part 1. It was a global npm module. The nodemon is the command to run, and then we just pass in the file path like we would for any other Node command. As we're going into the playground folder, and the file itself is called arrow-function.js, we'll run the following command:
nodemon playground/arrow-function.js
We'll run the file, and nothing prints to the screen, as shown in the following output, besides the nodemon logs because we have nothing in the file:
To get started, in the arrowfunction.js file, we'll create a function called square, by making a variable called square and setting it equal to an arrow function.
To make our arrow function (=>), we'll first provide the arguments inside parentheses. Since we'll be squaring a number, we just need one number, and I'll refer to that number as x. If I pass in 3, I should expect 9 back, and if I pass in 9, I would expect 81 back.
After the arguments list, we have to put the arrow in arrow function (=>) by putting the equal sign and the greater than symbol together, creating our nice little arrow. From here we can provide, inside curly braces, all the statements we want to execute:
var square = (x) => {
};
Next, we might create a variable called result, setting that equal to x times x, then we might return the result variable using the return keyword, as shown here:
var square = (x) => {
var result = x * x;
return result;
};
Now, obviously this can be done on one line, but the goal here is to illustrate that when you use the statement arrow function (=>), you can put as many lines as you want in between those curly braces. Let's call a square, we'll do that using console.log so we can print the result to the screen. I'll call square; and we'll call square with 9, the square of 9 would be 81, so we would expect 81 to print to the screen:
var square = (x) => {
var result = x * x;
return result;
};
console.log(square(9));
I'll save the arrow function (=>) file, and in Terminal, 81 shows up just as we expect:
Now the syntax we used in the previous example is the statement syntax for the arrow function (=>). We've also explored the expression syntax earlier, which lets you simplify your arrow functions when you return some expressions. In this case all we need to do is specify the expression we want to return. In our case that's x times x:
var square = (x) => x * x;
console.log(square(9));
You don't need to explicitly add the return keyword. When you use an arrow function (=>) without your curly braces, it's implicitly provided for you. That means we can save the function as shown previous and the exact same result is going to print to the screen, 81 shows up.
This is one of the great advantages of arrow functions when you use them in cases like filter or for those which we did in the notes.js file. It lets you simplify your code keeping everything on one line and making your code a lot easier to maintain and scan.
If I save the file in this state, 81 still prints to the screen; and this is great we have an even simpler version of our arrow function (=>):
Now that we have a basic example down, I want to move on to a more complex example that's going to explore the nuances between regular functions and arrow functions.