Множественные стрелочные функции в JavaScript: пример с React

Быстрый ответ

Множественные стрелочные функции в JavaScript представляют собой пример каррирования функции. Это изящные инструменты функционального программирования, которые улучшают читаемость и эффективность кода, при этом уменьшают его объём.

Вот пример:

// Объявление функции умножения
const multiply = x => y => x * y; // Кто сказал, что x * y должно быть скучно? :)
// Создание функции, которая удваивает число
const double = multiply(2);
console.log(double(4)); // Вывод: 8. Прекрасно подойдет для быстрого удвоения, не так ли?

Здесь функция multiply превращается в double, которая выполняет умножение на два.

Каррирование функций

В контексте функционального программирования каррирование превращает функцию с множеством аргументов в цепочку функций, каждая из которых принимает по одному аргументу. Нет, это не кулинарный курс для любителей карри!

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

Стрелочные функции предлагают сжатый синтаксис для объявления функций в JavaScript и имеют особенность — лексическое связывание this. Благодаря этому они отлично вписываются в React и другие практики функционального программирования.

Визуализация

Рассмотрим множественные стрелочные функции как последовательность этапов на производственной линии:

Сырьё (📦) -[Функция A]-> 🎛️ -[Функция B]-> 🛠️ -[Функция C]-> 🏭 Готовый продукт (🎁)

В более абстрактной форме:

const transformationPipeline = raw => stageA => stageB => stageC => `🎁 ${stageC}`;

Вводите 📦 с одной стороны, получаете 🎁 с другой!

const finalProduct = transformationPipeline(📦)(🎛️)(🛠️)(🏭);

Вот оно, каррирование, простым и понятным языком.

Функциональное Программирование на примере стрелочных функций

JavaScript активно применяет стиль функционального программирования, где стрелочные функции — ваш проводник в этом увлекательном путешествии.

Композиция функций

Функциональное программирование учит использовать композицию функций, а стрелочные функции представляют удобный синтаксис для реализации этого подхода, формируя цепочки, напоминающие матрёшку.

Подробнее об этом расскажет наш спикер на видео

Неявное и явное возвращение значений

Стрелочные функции также облегчают код, давая возможность неявного и явного возвращения значений. Однострочные функции не требуют ключевого слова return, в то время как многострочные — требуют его наличия.

Функции высшего порядка? Легко!

Функции высшего порядка, которые реализуют прием и возврат других функций, становятся естественным продолжением использования стрелочных функций в JavaScript.

Практическое применение

Функции с каррированием переходят от абстрактной теории к конкретной практике в различных задачах разработки:

Событийные обработчики в React

При обработке событий в React можно использовать каррированные функции вместо привязки this или объявления внешних переменных:

const Button = ({ id }) => {
  // Нет необходимости в .bind(this), каррирование – прекрасный подход
  const handleClick = value => event => {
    console.log(`Кнопка с id ${id} была нажата с параметром ${value}`);
  };

  // Обработчик onClick в стиле каррирования
  return <button onClick={handleClick('relevantValue')}>Нажми на меня</button>;
};

Такой метод приводит к чистому и элегантному коду.

Конструктор запросов

С помощью каррирования можно пошагово наращивать параметры запросов SQL или NoSQL, подобно конструктору Лего.

const queryBuilder = table => criteria => order => `SELECT * FROM ${table} WHERE ${criteria} ORDER BY ${order}`;
const getUsersByName = queryBuilder('users')('name = "John Doe"');
console.log(getUsersByName('date_created DESC')); // Джеймс Бонд мог бы поучиться у этой конструкции!

Полезные материалы

1. Стрелочные функции в JavaScript: Более ясный и сжатый синтаксис — SitePoint
2. Детальный просмотр стрелочных функций
3. Стрелочные функции в изучении JS
4. Знакомство с каррированием в функциональном JavaScript — SitePoint
5. ECMAScript 6: Новые возможности: Обзор и сравнение
6. Выражения стрелочных функций – JavaScript | MDN