В этой статье вы простым языком поймете работу с каррированием в JavaScript и увидите рабочие примеры его применения.
\n\n\n\n\n\n\n\nФункциональное программирование это стиль написания кода, в котором функции передают как аргументы (колбэки) и отдают тоже функции без сайд-эффектов(изменения состояния приложения).
\n\n\n\nМножество языков приняли такую стилистику в своей работе с кодом. Самые популярные из них это: JavaScript, Haskell, Clojure, Erlang и Scala.
\n\n\n\nВозможность передавать и возвращать функции породила много других концепций:
\n\n\n\n\n\n\n\nЧистые функции
Каррирование
Функции высшего порядка
И сейчас мы разберем одну из них. А именно каррирование, ну или карринг. Кому как удобно.
\n\n\n\nЭто процесс в функциональном программировании при котором мы можем трансформировать функцию с несколькими аргументами в упорядоченную последовательность вложенных друг в друга совершенно разных функций. Она возвращает новую функцию, которая ожидает уже следующий аргумент.
\n\n\n\nОна будет отдавать новую функцию до тех пор, пока не закончится количество аргументов. Аргументы остаются доступными в области видимости и используются при запуске кода, когда завершающая функция в цепочке каррирования отдаётся и запускается.
\n\n\n\n\n\n\n\nКаррирование это процесс превращения функции с множественной арностью в функцию с меньшей арностью — Кристина Брэйнвэйв.
Обратите внимание, что термин арность относится напрямую к количеству аргументов которое берет функция. Для примера:
\n\n\n\nfunction fn(a, b) {\n //...\n}function _fn(a, b, c) {\n //...\n}У функции fn два аргумента (2х арная функция), а _fn имеет три аргумента(3х арная функция).
Так что каррирование трансформирует функцию с несколькими аргументами в последовательную серию связанных функций, каждая из которых берет один из нужных аргументов.
\n\n\n\nДавайте посмотрим на простой пример:
\n\n\n\nfunction multiply(a, b, c) {\n return a * b * c;\n}Функция берёт три аргумента, умножает числа и отдаёт результат:
\n\n\n\nmultiply(1,2,3); // 6Посмотрите как мы вызвали функцию умножения с полным набором аргументов. Теперь давайте создадим каррированную версию этой функции и посмотрим, как бы мы могли вызвать ту же функцию, но уже через серию запросов:
\n\n\n\nfunction multiply(a) {\n return (b) => {\n return (c) => {\n return a * b * c\n }\n }\n}log(multiply(1)(2)(3)) // 6Мы превратили функцию multiply(1,2,3) в несколько вызовов других вызовов multiply(1)(2)(3).
Просто напросто одна простая функция была переделана в серию последовательных функций. Чтобы получить результат умножения трёх чисел 1, 2 и 3, числа передаются одно за другим, каждое число передаётся следующей функции для запуска.
\n\n\n\nМы могли бы разделить multiply(1)(2)(3) на несколько функций, чтобы вы лучше поняли процесс:
const mul1 = multiply(1);\nconst mul2 = mul1(2);\nconst result = mul2(3);\nlog(result); // 6Давайте рассмотрим всё по последовательности. Мы передали 1 функции multiply:
let mul1 = multiply(1);Она отдаёт функцию:
\n\n\n\nreturn (b) => {\n return (c) => {\n return a * b * c\n }\n }Теперь mul1 это функция с аргументом b.
Далее мы берём функцию mul1, передавая ей 2:
let mul2 = mul1(2);mul1 отдаст третью функцию:
return (c) => {\n return a * b * c\n }Отданная функция теперь хранится в переменной mul2.
По-сути mul2 будет:
mul2 = (c) => {\n return a * b * c\n }Где mul2 вызывается с 3 как параметром:
const result = mul2(3);Что делает вычисления вместе с параметрами, переданными ранее: a=1, b=2. В итоге получаем 6.
log(result); // 6Будучи вложенной функцией, mul2 имеет доступ к области видимости других функций, multiply и mul1.
Вот так mul2 будет делать вычисления с переменными указанными в фунциях из которых уже вышли. Хоть функции уже давно и были отданы и зачищены в памяти, но переменные из них ещё остаются доступными.
Вы видите, что три числа были применены одна за другой каждый раз и каждый раз новая функция отдавалась, но до тех пор, пока все числа не иссякнут.
\n\n\n\nДавайте посмотрим на другой пример:
\n\n\n\nfunction volume(l,w,h) {\n return l * w * h;\n}\nconst aCylinder = volume(100,20,90) // 180000lУ нас есть функция volume, которая высчитывает объем любой твёрдой формы.
Подход с каррированием будет принимать один аргумент и отдавать функцию, которая также будет принимать ещё один аргумент и отдавать тоже функцию. Это будет продолжаться до последнего аргумента и пока не вернется последняя функция, в которой произойдут уже все операции с умножением предыдущих аргументов вместе с последним.
\n\n\n\nfunction volume(l) {\n return (w) => {\n return (h) => {\n return l * w * h\n }\n }\n}\nconst aCylinder = volume(100)(20)(90) // 180000Тоже, что и в функции multiply, последняя функция принимает только h, но произведет операции с другими переменными, которые были в уже завершившихся функциях. Это работает вне зависимости от замыканий.
В общем, суть каррирования в том, что мы берём функцию и извлекаем другую функцию, которая отдаёт уже специализированную функцию.
\n\n\n\nМне нравится математическая иллюстрация на Википедии, показывающая концепцию каррирования. Давайте посмотрим на неё с нашим собственными примером.
\n\n\n\nУ нас есть уравнение.
\n\n\n\nf(x,y) = x^2 + y = zЕсть две переменные x и y. Если бы двум переменным было выдано x=3 и y=4, то каким было бы z.
Если мы заменим y на 4 и x на 3 в f(x,y):
f(x,y) = f(3,4) = x^2 + y = 3^2 + 4 = 13 = zТо мы получим результат — 13.
Мы можем каррировать f(x,y), чтобы получить переменные из последовательности функций:
h = x^2 + y = f(x,y)\nhy(x) = x^2 + y = hx(y) = x^2 + y\n[hx => w.r.t x] and [hy => w.r.t y]Если мы поправим x=3 в уравнении hx(y) = x² + y, то оно отдаст новое уравнение у которого есть y как переменная:
h3(y) = 3² + y = 9 + y
\n\n\n\nЭто тоже самое, что и:
\n\n\n\nh3(y) = 3^2 + y = 9 + yЗначение не было решено, оно отдало новое уравнение 9 + y, ожидая ещё одну переменную y.
Далее мы передадим y=4:
h3(4) = h(3)(4) = f(3,4) = 9 + 4 = 13y это последняя переменная в цепочке, сложение происходит с предыдущей переменной x=3 и получается 13.
Мы просто напросто каррировали уравнение f(x,y) = 3² + y в последовательность других уравнений.
h3(y) = h(3)(y) = f(3,y) = 3^2 + y = 9 + yПеред тем как получить результат.
\n\n\n\nТут немного математики и вы можете не совсем понять, что там происходит. Почитайте все детали на Википедии.
\n\n\n\nСейчас некоторые могут подумать, что количество вложенных функций в карированной функции зависит от числа получаемых аргументов. Ну, собственно в карировании так оно и есть.
\n\n\n\nСейчас я могу сделать функцию volume таким образом:
function volume(l) {\n return (w, h) => {\n return l * w * h\n }\n}И теперь её можно вызывать так:
\n\n\n\nconst hCy = volume(70);\nhCy(203,142);\nhCy(220,122);\nhCy(120,123);Или вот так:
\n\n\n\nvolume(70)(90,30);\nvolume(70)(390,320);\nvolume(70)(940,340);Мы только что сделали специальную функцию, которая считает объем любого цилиндрического объекта длинной (l), 70.
Она принимает 3 аргумента и имеет 2 вложенные функции в отличие от предыдущей версии, которой нужно 3 аргумента и у которой 3 вложенные функции.
\n\n\n\nНо эта версия без каррирования. Там мы просто сделали частичное применение функции volume.
Собственно каррирование и частичное применение схожи, но подразумевают под собой разные концепции.
\n\n\n\nЧастичное применение преобразует функцию в другую функцию с меньшей арностью.
\n\n\n\nfunction acidityRatio(x, y, z) {\n return performOp(x,y,z)\n}\n|\nV\nfunction acidityRatio(x) {\n return (y,z) => {\n return performOp(x,y,z)\n }\n}Обратите внимание, что тут я оставил в покое детали выполнения функции peroformOp. Она не очень важна. Всё, что вам нужно знать, это концепции применения каррирования и частичного применения.
Это частичное применение функции acidityRatio. Тут нет каррирования. Эта функция частично применена, чтобы получить меньшую арность, ожидая меньшее количество аргументов, чем изначальная функция.
Чтобы применить каррирование, мы могли бы сделать так:
\n\n\n\nfunction acidityRatio(x) {\n return (y) = > {\n return (z) = > {\n return performOp(x,y,z)\n }\n }\n}Каррирование создаёт вложенные функции в соответствии с числом аргументов в ней. Каждая функция тут получает свой аргумент. Если нет аргумента, то нет и каррирования.
\n\n\n\nКаррирование работает для функций с числом аргументов больше двух — Wikipedia.
\n\n\n\n\n\n\n\nКаррирование преобразует функцию в последовательность других функций, каждая из которых берёт по одному аргументу каррированной функции.
Могут быть случаи в которых карррование и частичное применение пересекаются. Предположим, что у нас есть такая функция:
\n\n\n\nfunction div(x,y) {\n return x/y;\n}Если мы применим частичное применение, то получим вот что:
\n\n\n\nfunction div(x) {\n return (y) => {\n return x/y;\n }\n}И каррирование даст нам такой же результат:
\n\n\n\nfunction div(x) {\n return (y) => {\n return x/y;\n }\n}Хоть эти два подхода и дают схожий результат, все же по сути они разные.
\n\n\n\nКак мы раньше говорили, каррирование и частичное применение схожи, но внутри у них всё по-другому. Общее у них то, что при работе они зависят от замыканий.
\n\n\n\nЕстественно, этот подход очень удобен если вам надо:
\n\n\n\nНаписать небольшие модули кода, которые можно переиспользовать и конфигурировать с легкостью, как и с npm:
\n\n\n\nДля примера у вас есть магазин и вы хотите дать 10% скидку вашим любимым клиентам:
\n\n\n\nfunction discount(price, discount) {\n return price * discount\n}Когда один из таких клиентов что-нибудь покупает на 500$, то вы её даёте ему:
\n\n\n\nconst price = discount(500,0.10); // $50 \n// $500 - $50 = $450Тут вы понимаете, что этот процесс будет происходить ежедневно:
\n\n\n\nconst price = discount(1500,0.10); // $150\n// $1,500 - $150 = $1,350\nconst price = discount(2000,0.10); // $200\n// $2,000 - $200 = $1,800\nconst price = discount(50,0.10); // $5\n// $50 - $5 = $45\nconst price = discount(5000,0.10); // $500\n// $5,000 - $500 = $4,500\nconst price = discount(300,0.10); // $30\n// $300 - $30 = $270Мы можем просто каррировать функцию скидки, чтобы нам не пришлось всегда добавлять 0.10.
function discount(discount) {\n return (price) => {\n return price * discount;\n }\n}\n\nconst tenPercentDiscount = discount(0.1);Теперь нам нужна только цена для расчета стоимости со скидкой:
\n\n\n\ntenPercentDiscount(500); // $50\n// $500 - $50 = $450И снова, так получается, что некоторые клиенты уж очень нам важны, важнее других. И мы хотим им дать скидку уже в 20%.
\n\n\n\nТут мы будем использовать нашу каррированую функцию скидки:
\n\n\n\nconst twentyPercentDiscount = discount(0.2);Мы делаем новую функцию для наших очень важных клиентов, вызывая функцию каррирования со значением 0.2, что есть 20%.
Отдаваемая функция twentyPercentDiscount будет использоваться для расчета скидок у таких важных клиентов:
twentyPercentDiscount(500); // 100\n// $500 - $100 = $400\ntwentyPercentDiscount(5000); // 1000\n// $5,000 - $1,000 = $4,000\ntwentyPercentDiscount(1000000); // 200000\n// $1,000,000 - $200,000 = $600,000Ещё мы можем избегать частых вызовов функций с одним и тем же аргументом:
\n\n\n\nДля примера, у нас есть функция для расчета объема цилиндрического объекта:
\n\n\n\nfunction volume(l, w, h) {\n return l * w * h;\n}Так получается, что все они с высотой в 100m. Это приведет к вызову функции с повторяющимся аргументом h = 100.
volume(200,30,100) // 2003000l\nvolume(32,45,100); //144000l\nvolume(2322,232,100) // 53870400lЧтобы решить эту проблему, мы каррируем функцию volume:
function volume(h) {\n return (w) => {\n return (l) => {\n return l * w * h\n }\n }\n}Теперь мы можем сделать специальную функцию для цилиндров с конкретной высотой:
\n\n\n\nconst hCylinderHeight = volume(100);\nhCylinderHeight(200)(30); // 600,000l\nhCylinderHeight(2322)(232); // 53,870,400lДавайте сделаем функцию, которая берёт любую функцию и отдаёт каррированную версию этой функции.
\n\n\n\nДля этого мы можем сделать так:
\n\n\n\nfunction curry(fn, ...args) {\n return (..._arg) => {\n return fn(...args, ..._arg);\n }\n}Что тут произошло? Наша функция каррирования принимает функцию (fn), которую мы хотим, собственно, каррировать и также неизвестное число параметров(…args). Rest оператор используется, чтобы собрать все параметры после fn в …args.
Далее, мы отдаём функцию, которая также собирает все остаточные параметры как …_args. Эта функция вызывает изначальную функцию fn, передавая ей …args и …_args используя spread оператор для параметров, далее значение отдаётся пользователю.
Теперь мы можем использовать нашу собственную функцию для каррирования нужных функций.
\n\n\n\nДавайте применим эту функцию для создания более специфичной функции по расчёту объёма стометровых цилиндров:
\n\n\n\nfunction volume(l,h,w) {\n return l * h * w\n}\nconst hCy = curry(volume,100);\nhCy(200,900); // 18000000l\nhCy(70,60); // 420000lЗамыкания делают каррирование возможным. Возможность сохранять состояние уже выполненных функций даёт нам возможность для создания фэктори-функций, которые могут давать точное значение аргументу.
\n\n\n\nКаррирование очень коварное дело поначалу, учитывая замыкания и функциональное программирование. Но я убеждаю вас, что со временем и постоянной практикой, вы полностью его поймете и увидите всю его ценность.
\n\n\n\nСсылки:
\n\n\n\n\n\n\n\n\n","type":"js","date":"2021-02-01T16:48:24.000Z","acf":{"seo_desc":"В этой статье вы простым языком поймете работу с каррированием в JavaScript и увидите рабочие примеры его применения.","keywords":"каррирование в javascript, карринг в javascript, каррирование js","pub_date":"2020-03-06","tags":"JavaScript, Функции, Каррирование"},"title":"Понимаем каррирование в JavaScript","id":"6a1ff13a-ed43-5409-ac7c-2badd1566a47","excerpt":"В этой статье вы простым языком поймете работу с каррированием в JavaScript и увидите рабочие примеры его применения.
\n","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/02/curryingjskfds.jpg"},"interesting":[{"title":"Погружаемся в работу с children на React","slug":"pogruzhaemsya-v-raboty-s-children-na-react","type":"js"},{"title":"Понимаем каррирование в JavaScript","slug":"ponimaem-carrirovanie-v-javascript","type":"js"},{"title":"useEffect(fn, []) это не новый componentDidMount()","slug":"useeffect-eto-ne-novyi-componentdidmount","type":"js"}]}},"staticQueryHashes":["3576131997","63159454"]}