Benefits of using Arrow Functions in JavaScript

Javascript Functions

Arrow functions, or my favorite name for these functions Fat Arrow Functions, were introduced in ECMAScript 2015. This new way of declaring functions had some benefits over using the existing Function Expression.

Using the function expression is verbose:

We can agree that we want to keep the code DRY. Adding the word function in front of every function declaration removes some of that DRYness. Now with the Fat Arrow Function the function declaration is implied with the following representation () => {}. This removes the need of adding the word function in front of every function declaration.

// Using a Function Expression
function newFunction(args) {}
// Using the Fat arrow function
() => {}

You can use the spread operator in the arguments of a Fat Arrow Function:

If for any reason your function receives a lot of arguments, and you don’t need to use them individually, for example you are sending those arguments as parameters in an API call. You don’t need to write down every single parameter in the function arguments.

// A ridiculous example using the Function Expression
function sendUserInfo(firstName, lastName, email, phoneNumber, dateOfBirth, address, favoriteColor, favoriteFood) {}
// Simplifying with spread operator with the Fat Arrow Function
// userProperties will be an array of arguments.
(...userProperties) => {}

Fat Arrow functions have an implicit return

If the function only has a return statement, there is no need to write return.

// Using a Function Expression.
function isOpen(value) {
    return !!value
} 
// Using a Fat Arrow Function, the return is implicit.
const isOpen = (value) => !!value

Fat Arrow functions automatically binds this

If you use React you may understand this better with the use of Class Component vs Functional Components, and why we want to use Functional Components.

Fat arrow functions automatically bind this to the function.

Let me show you with this React Component example:

// Using a class component
Class ClassComponent extends React.Component {
    constructor(props) {
        super(props)
        this.setName = this.setName.bind(this)
    }
    function setName() {}
    return(
        <Input onChange={setName} />
    )
}
// Using a functional component
const FunctionalComponent = () => {
    const setName = () => {}
    return(
        <Input onChange={setName} />
    )
}