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 = => ({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!

Latest comments (0)

The JavaScript Brief

1. Top 5 MERN STACK projects to improve your practical understanding

Boost your MERN Stack development skills by undertaking interesting beginner projects. These five engaging projects cover web applications and range from social media website applications to geo-social networking maps. Hone your understanding and apply modern techniques backed up by hands-on experience.

2. How To Optimize Your React App’s Performance

Learn the best optimizing techniques to make your React applications faster and more efficient. Focusing on the identification of performance bottlenecks and common pitfalls to avoid, these optimization strategies will keep your applications running smoothly even when faced with growing complexity.

3. A story of let, const, object mutation, and a bug in my code

In the pursuit of bug-free code, explore an incident involving a mix-up between const and let, making sure your custom code works effectively with third

party documentation. Discover best practices on program flow and learn about JavaScript's unpredictable aspects to ensure your core code is robust.