Arrow Functions

Arrows are a function shorthand using the => syntax. They are syntactically similar to the fat arrow syntax in C#, Java, and CoffeeScript. They support both expression bodies and statement block bodies that return the value of the expression. Unlike functions, arrows share the same lexical this as their surrounding code.

The following is what a classic function would look like maintaining the same lexical this:

Code Listing 70

Now, we can simply write it as follows:

Code Listing: 71

Expression bodies

Expression bodies are a single line expression with the => token and an implied return value.

Code Listing: 72

Running the preceding code produces the following result:

Code Listing: 73

As you can see from the example, this new syntax is very clean and removes needless boilerplate code.

Statement bodies

Statement bodies are multiline statements that allow for more complex logic. You also have the option to return a value from the statement or not.

Code Listing: 74

Running the preceding code produces the following result:

Code Listing: 75

Lexical (this)

With this new fat arrow syntax, we can safely access the lexical this without worrying about it changing on us.

Let’s look at an example:

Code Listing: 76

Running the preceding code produces the following result:

Code Listing: 77

Previously, we would have had to create a separate _this closure variable to enable accessing the correct this. That actually is exactly what happens for us automatically when our code gets transpiled. Take a look at the same code snippet after it has been transpiled to ES5:

Code Listing: 78

As you can see, a new variable _this was created for us within the forEach function.