DEV Community

Cover image for A bit about Arrow Functions
Semir Teskeredzic
Semir Teskeredzic

Posted on

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!'
}
Enter fullscreen mode Exit fullscreen mode

Now we can write this as an arrow function:

const clean = () => {
    return 'Now I am clean!'
}
Enter fullscreen mode Exit fullscreen mode

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!'
Enter fullscreen mode Exit fullscreen mode

This is called implicit return.

We put params in parentheses like so:

const clean = (shampoo, soap) => 'Now I am clean!'
Enter fullscreen mode Exit fullscreen mode

When we have only one param we can omit parentheses:

const clean = shampoo => 'Now I am clean!'
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

Here is some advanced syntax that arrow functions support:

Rest parameters

(a, b, ...t) => expression
Enter fullscreen mode Exit fullscreen mode

Destructuring with params

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

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})
Enter fullscreen mode Exit fullscreen mode

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!

Oldest comments (0)