A bit about Arrow Functions

Not so long ago, you were happily writing your UI component in React, coding an onChange handler just to see it doesn't work. After couple of minutes you remember that you forgot to bind it in the constructor.

Entire React ecosystem switched in favor of functional components, and with the ES6, the arrow functions were introduced. In this short article we will go through the basics, limitations, use cases, syntax and other goodies.

So the arrow function is a compact expression that has been introduced with ES6 as an alternative to the standard function expression. It is quite compact and can be shortened to the limits.

Let's go through the syntax, here is a standard function expression that returns a good old string:

const clean = function() {
    return 'Now I am clean!'
}

Now we can write this as an arrow function:

const clean = () => {
    return 'Now I am clean!'
}

We got rid of the word function and we introduce an arrow. If we have only one statement we can omit the return along with the { } brackets

const clean = () => 'Now I am clean!'

This is called implicit return.

We put params in parentheses like so:

const clean = (shampoo, soap) => 'Now I am clean!'

When we have only one param we can omit parentheses:

const clean = shampoo => 'Now I am clean!'

Apart from omitting there are situations where we have to use brackets and return and that is when body of the function requires additional lines:

const shopping = (price1, price2) => {
    let fee = 4
    return price1 + price2 + fee
}

Here is some advanced syntax that arrow functions support:

Rest parameters

(a, b, ...t) => expression

Destructuring with params

({a, b} = {a: 5, b: 10}) => a + b //returns 15
([a, b] = [5, 10]) => a + b //returns 15

Now that we know the syntax let's talk a bit more about arrow functions.

Arrow function don't have their own this, they establish this based on the scope the arrow function is defined within. With regular functions this represents the objects that calls the function while with arrow functions this represents the owner of the function.

Furthermore, arrow functions cannot be used as constructors (in short can't be used with new)and they do not have prototype property.

When an arrow function returns object literal as an implicit return, it must be wrapped with parentheses:

const listOfCars = cars.map(car => ({model: car.model})

Arrow functions are widely used for easy array filtering, mapping, and they are used in more concise promise chains.

Remember the throwback from the beginning of the article about classes and binding and how it would be great if functions were somehow auto bind? Well, arrow functions don't need to be bind but using them as event handlers with Class syntax is not such a good idea. You can read one opinion about it in this post. So if you are to use Class based components, you might just continue to use standard function expressions with bindings in constructor for event handlers. You guessed it, it has everything to do what this refers to in arrow functions.

Let's recap

• Arrow functions must have parentheses before the arrow if there are no params or when there are more than one param.
• You can omit the brackets of the function body and the return if you have only one statement -> Implicit return
• When you have more than one statement you must use brackets and return
• When you have only one param you can omit the parentheses
• You can use destructuring with params
• You can't use arrow functions as constructors
• When returning object literal you have to put it inside parentheses
• Not so good idea to be used as event handlers in Class based components

That was a short walk through the theme of arrow functions, thanks for reading!