Множественные стрелочные функции в 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')); // Джеймс Бонд мог бы поучиться у этой конструкции!
Полезные материалы
- Стрелочные функции в JavaScript: Более ясный и сжатый синтаксис — SitePoint
- Детальный просмотр стрелочных функций
- Стрелочные функции в изучении JS
- Знакомство с каррированием в функциональном JavaScript — SitePoint
- ECMAScript 6: Новые возможности: Обзор и сравнение
- Выражения стрелочных функций – JavaScript | MDN