Преимущества использования стрелочных функций в JavaScript

Стрелочные функции, или мое любимое название для этих функций Fat Arrow Functions, были представлены в ECMAScript 2015. Этот новый способ объявления функций имел некоторые преимущества по сравнению с использованием существующего Function Expression.

Использование функционального выражения является подробным:

Мы можем согласиться с тем, что хотим сохранить код СУХИМ. Добавление слова «функция» перед каждым объявлением функции устраняет часть этой СУХОСТИ. Теперь с помощью Fat Arrow Function объявление функции подразумевает следующее представление () => {}. Это избавляет от необходимости добавлять слово функция перед каждым объявлением функции.

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

Вы можете использовать оператор распространения в аргументах функции Fat Arrow:

Если по какой-либо причине ваша функция получает много аргументов, и вам не нужно использовать их по отдельности, например, вы отправляете эти аргументы в качестве параметров в вызове API. Вам не нужно записывать каждый параметр в аргументах функции.

// 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 имеют неявный возврат

Если функция имеет только оператор возврата, нет необходимости писать 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 автоматически связывают this

Если вы используете React, вы можете лучше понять это, используя компонент класса по сравнению с функциональными компонентами, и почему мы хотим использовать функциональные компоненты.

Функции жирных стрелок автоматически привязывают this к функции.

Позвольте мне показать вам на этом примере React Component:

// 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} />
    )
}