Функциональное программирование от А до Я. ФП на JS. Монады, функторы, каррирование, композиция

В этом видео мы поговорим про функциональное программирование на javascript. Разберем такие темы как: Декларативность, Чистые функции и сайд эффекты, Иммутабельность (неизменяемость), Функции первого класса, Функции высшего порядка, Композиция/конвейер, Частичное применение и каррирование, Chaining, Контейнеры, Функторы и аппликативные функторы, Монады, Спецификация Fantasy-Land
Мой курс "Продвинутый Frontend. В production на React", скидка 20% - ulbitv.ru/frontend
Таймкоды:
00:00 ➝ Введение
01:30 ➝ План на урок
04:00 ➝ Что такое ФП? Сравнение с ООП
07:20 ➝ Концепции ФП
09:00 ➝ Декларативность vs императивность
13:25 ➝ Чистые функции и сайд эффекты
18:10 ➝ Иммутабельность (неизменяемость данных)
22:40 ➝ Минусы мутабельности и преимущества иммутабельности
24:20 ➝ Функции первого класса
26:40 ➝ Функции высшего порядка
31:20 ➝ Смысл концепций ФП
33:10 ➝ Композиция (compose)
37:00 ➝ Конвейер (pipe)
37:45 ➝ Каррирование и частичное применение
45:50 ➝ chaining (цепочки вызовов)
46:40 ➝ Контейнеры
52:05 ➝ Функторы и монады
58:55 ➝ Аппликативные функторы
01:03:10 ➝ Спецификация Fantasy land
01:04:10 ➝ Другие монады (either, future, writer)
01:06:40 ➝ Время ставить лайки и писать комментарии) всем спасибо!
Ссылка на мой телеграм канал - t.me/ulbi_tv
Поддержать меня и мой канал вы можете по ссылкам ниже.
Patreon/boosty (доступ к бонусам) - boosty.to/ulbitv
Qiwi кошелек - qiwi.com/n/BODYE821
Яндекс деньги - yoomoney.ru/to/4100116193037469

[@fatcat4168]

Сегодня досрочно закрыл испытательный срок на своей первой работе фронтом 🎉🎉🎉 во многом благодаря Тимуру🎉🎉🎉, прошел почти весь курс, не дошел только до последнего раздела. Проходил ещё на первом потоке, у меня там была аватарка с вислоухим котом😺 когда прошел, на полгода забросил, но всё-таки взял себя в руки и устроился😊 всем удачи и верьте в себя!

[@es7729]

Мои поздравления! Красавчик!

[@vladislavkomkov5178]

Хвастайся зп в 3 кириешки))

[@webtensei2327]

@@vladislavkomkov5178так все с чего-то начинают)

[@diamondserg-43]

Молодец!

[@arthurq7843]

Сколько опыта крутил?)

[@ker4ik13]

Обожаю твои уроки. Нет никого, кто объяснял бы понятнее и интереснее

[@UlbiTV]

Стараемся, спасиб)

[@404Negative]

неет нееет никого кроме бога одного

[@vitalex9383]

Ролик вышел, как раз за час, до собеса. Решил быстро глянуть. И на собесе, спросили про функциональное программирование и функции высшего порядка. И я как выдал всю базу, которая есть в ролике, даже доп вопросов не задали😂. Спасибо Тимур за твой труд, за твои бесплатные и платный курсы.

[@Kokurorokuko]

По-моему, на 51:00 f и g нужно поменять местами. Сначала применяется f (она должна быть внутри), а потом g.

[@midrala]

Хочется сказать слова поддержки и выразить свое уважение к автору проделанную им работу. Спасибо Человек, ты делаешь этот мир лучше! Проделанная тобой работа помогает действительно стремящимся к знаниям людям получить их быстро и безболезненно, продолжай очень нравится. Творческих успехов и активной аудитории тебе!

[@UlbiTV]

Спасибо за такие слова ❤️🙏

[@-Forever-Young-]

Сразу лайк! Нет сомнений в качестве

[@LeonidPolyakov]

Да, 100 процентов будет адекватно и информативно.

[@Michael-bf7pm]

Твой ролик про ООП был просто шикарен, поэтому я невероятно ждал видео про ФП! Спасибо большое, Тимур!

[@UlbiTV]

Спасибо! Жду фидбек))

[@sidless3862]

Вообще, когда только начинал изучение JavaScript, считал его именно функциональным языком. Да и по факту большую часть времени пишу в функциональном стиле, и люблю его больше чем ООП. По-моему на фронте в ООП пишут только Ангулярщики, но могу ошибаться. Спасибо за очень информативный ролик, как всегда лучший!

[@user-kw8cq6cd6y]

Жду структурное программирование на Rust или Go))

[@nikitatimofeenko9351]

Поддерживаю, ждем структурное программирование с примерами и на Rust и на Go

[@user-yq6vo5vb9p]

@@nikitatimofeenko9351 поддерживаю поддерживание, ждем структурное программирование с примерами и на Rust и на Go

[@dmitrykuskov6715]

Интересная тема для меня. В свое время проходил курс по Haskell, поэтому постараюсь дополнительно разъяснить про Монаду и Аппликативный функтор, если кому-то интересно, но не до конца понятно. 1) Монада - это структура, являющаяся наследником Функтора, но для которой дополнительно реализован метод chain. В разных языках/библиотеках название может быть разным. chain очень похож на map, отличие в том, что передаваемая в метод chain функция возвращает не значение (как в случае с map), а сам контейнер, в который запаковано значение. Пример Монады, который прямо под носом, но не был в таком ключе упомянут в видео - это Array. Для него методом chain по своей сути является flatMap: ведь функция, передаваемая во flatMap возвращает сам контейнер - Array: const duplicate = (arr) => arr.flatMap((n) => [n, n]); duplicate([1,2,3]); // [1,1,2,2,3,3] ramdajs.com/docs/#chain Как видно из примера, Монада - это более мощный интерфейс, чем Функтор, потому что позволяет менять не только запакованные значения(в случае с map), но и структуру самого контейнера. При использовании Maybe как Монады мы можем преобразовать Maybe в Nothing (использую псевдо-код): Maybe.of(1).chain(() => Nothing); // Nothing Maybe.of(1).chain((n) => Maybe.of(n * 2)); // Maybe(2) Используя Maybe как Функтор, мы можем изменить только значение, но не сам контейнер: Maybe.of(1).map((n) => n * 2); // Maybe(2) Промис в некотором понимании можно использовать и как Функтор, и как Монаду: Promise.resolve(1).then((n) => n * 2); Promise.resolve(1).then((n) => Promise.resolve(n * 2)); 2) Если кратко говорить про Аппликативный функтор, то он нужен, чтобы применять обычную функцию к упакованным значениям. Важно, чтобы все аргументы функции были одного типа. Например, у нас есть функция сложения, работающая с примитивами: const sum = (a, b) => a + b; Но мы хотим сложить не просто 2 числа, а 2 числа, упакованных в Maybe, причем сделать это лаконично и переиспользуя функцию sum. Maybe является Аппликативным функтором, т.к. реализует метод ap. Поэтому можем решить задачу так: const maybeResult = liftA2(sum, maybe1, maybe2); Если хотя бы 1 из переданных Maybe окажется Nothing, то результат всего выражения будет Nothing: такое поведение прописано в реализации ap для Maybe, которая дергается внутри liftA2. Для других структур поведение может быть своим, главное, чтобы оно удовлетворяло законам Аппликативных функторов. 3) Также можно упомянуть, что любая Монада является Аппликативным функтором, а любой Апликативный функтор является обычным Функтором. Это видно на схеме спецификации fantasy-land. На практике это означает, что если нам нужно объявить какую структуру Монадой, то нам достаточно реализовать только метод chain, а реализация методов ap и map будут выведены автоматически.

[@flame_____]

Крутой ролик, теперь у меня есть понимание этих всех принципов

[@user-cd7iz2iv8h]

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

[@user-uk1cu2hm2f]

супер контент!!! ждал! спасибо за труд!

[@aliicomua1369]

Спасибо за контент. Всё равно на какую тему ролик от этого автора, главное что 100% это будет полезно.

[@konstantinsologub9568]

Не понимаю как я не подписался на тебя раньше, хотя просматривал твои ролики до этого момента. Очень доходчиво объясняете и отличная дикция!

[@UlbiTV]

Спасибо!

[@kowkavn2356]

Лайк однозначно, коммент для продвижения, и вопрос по другой теме - снимаешь разбор Rx.js? Могу ошибаться, но она в стиле фп вроде. И как продолжение темы, или в принципе для расширения кругозора интересно услышать твое мнение и опыт в ней.

[@maratvaliev8642]

Аналог Конвейера в ООП можно считать паттерн Строитель (Builder). Также похожий подход можно увидеть в функции createSelector, библиотеки Redux-toolkit.

[@Roger-qj4wu]

Спасибо, что продолжаешь давать нам ценный контент!

[@falsetrue7910]

Качество видео растет от ролика к ролику, смотрю почти каждый ролик и точно могу это сказать 😂 отличное введение в фп, но как ни крути, для полноценного фп надо писать не не js

[@solovievss]

Очень наглядное руководство по ФП! Разработчики, поделитесь опытом, может кто-то использовал ФП у себя в проектах? У меня дальше carry,compose,map в рамках ramda и lodash дело не пошло. С ts типизацией очень громоздкий код получался.

[@user-yt9he6ud5r]

Фунцкиональный стиль в JS это богоугодное дело! Жду не дождусь когда в спецификацию JS добавят конвейерный (pipeline) оператор |>

[@awenn2015]

Я лично жду когда в js добавят выражение по типу этого (выражение раннего выхода как в котлинине) const a = 5 ;((a: number) => { const b = a-5 || return false }) (a) Что бы не проверять ифами какую то тему и выходить в ифе

[@nikman5541]

Отличный ролик на самом деле. Я занимаюсь JS уже 3 года и в этом ролике я открыл для себя новые интересные применения функций. Они вроде бы и были логичными, но про них даже не думал

[@adelinaromanova8353]

Лайк! 🎉

[@tahrizade]

ждем - про Микросервери , микрофронтенд И так далее 😊

[@barbatage5078]

Юлби, жги! Мы тебя любим 🫶🏼 каждый ролик долгожданный!

[@helenit4365]

Да!!!✨️🌟🔥

[@user-dw8lb8lc7u]

Спасибо ЮЛЬБИ!!! уникальный качественный контент

[@ode2877]

Интересна штука особенно про монады, захотелось попробовать применять для избавления фигурных скобочек if error try catch и тд, единственное не хочется терять в производительности из за красоты, не знаю насколько v8 оптимизирует такие функциональные фокусы

[@miRorshik]

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

[@user-rw3gf4te4e]

просто шикарно!

[@user-gk1yb3vp4b]

Мозг взорван, но мне понравилось))) Продолжай сенсей

[@MAKS-FISHER]

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

[@user-hy4qw4ki3o]

Привет! Видео класс! Подскажи где ты рисуешь видеоряд? Слайды и т.д.

[@yohohowowowo9471]

О, это для меня! Я, конечно, не программист, но иногда приходится писать код, причём в основном на Лиспе или VBA, где ООП не реализовано. И именно в Лиспе, функции - это основной и довольно мощный инструмент. Из-за специфики кода, при написании программы, сначала приходится прописывать все функции последовательно от самого высокого уровня вложенности до самого низкого.

[@samiracle9852]

Как раз подумывал курс купить, как диплом допишу, но раз такая скидочка, то нельзя откладывать Ну и ролик топ, как обычно

[@tesohi]

Господи, это превосходно! Я столько знаний получил с этого, мега круто! Причем как знаний по ФП, так и много-много знаний по js и лучшему пониманию того что происходит. А ещё мемоизация это лучший пример замыкания🤩 Тимур, это превосходно, ваш курс стоит покупки более чем! 💯💯💯

[@user-zb3fy2je8b]

Тимур лучший, большое спасибо за видео. Твои уроки помогают разобраться лучше всего

[@VolodymyrSirenko]

Для меня очень полезное видео, спасибо!

[@inriinriinriinriinri]

Качество визуализации стремительно растёт! Куда приятнее и легче смотреть на анимации в красивых цветах, чем на скриншоты где что-то непонятное написано от руки) Очень интересный урок! Спасибо!

[@eunicsi]

Лайк и комментарий для продвижения автоматически, спасибо!

[@HaywasterChannel]

Блин, я искал буквально 3 дня назад видео по сравнению парадигм ООП и ФП, не нашел. И тут бабах! Очень кстати) Спасибо большое, Тимур!

[@Bespokerug]

Спасибо за твои труды! Не мог бы ты сделать подобный ролик про паттерны проектирования?

[@UlbiTV]

В todo есть такой ролик

[@barbatage5078]

Сразу лайк не глядя! ❤

[@user-gd4vi6fv1z]

Это ОЧЕНЬ классный ролик, спасибо огромное! действительно, ни где не встречала так четко структурированной информации.

[@lolimon58]

Лайк префом. btw я scala разраб

[@ammoney159]

Хороший видос, апдейт по монтажу хороший, спасибо

[@WinchesterD]

Круто, спасибо за видео! 👍

[@nk_77777]

Лайк со старта)❤

[@Sershir]

Спасибо

[@awenn2015]

2:32 Я хоть и давно в вебе (3 года в js) но последние 5 пунктов вообще хз что это такое, как будто из ассемблера что то)) Хотя посмотрев ролик понимаешь что рано или поздно с опытом даже не зная этих заумных терминов сам приходишь к декларативности

[@musicthreads]

Лайкос тебе, дружище, за работу!

[@user-wu8zt4we5n]

А ты видел nodejs со встроенным gpt? Такой забавный Франкенштейн, но выглядит круто: переход к коду программы на человеческом языке!

[@givename48]

Может для фана, ролик по Backend серверу на Haskell? Отличное расширение кругозора! (я просто адепт Haskell)

[@kristinavolk2660]

Спасибо огромнейшее за тонкость и глубину контента. Заставляет явно провернуться шестеренкам в голове 🤓 со шлейфом, что что-то понял )) Эстетично и со вкусом 🌹 считывается, что ты в теме не просто шаришь, знаешь концепции, но ещё и Чувствуешь 💛 гармонично ориентируешься, но и подставляешь себя под критику, чтобы динамически расширить познание и критического мышления, развить его живость, эластичность и остроту. Редкость. Ценно 🫶🏻

[@yggllen]

В целом интересная теория, но со стороны большого опыта работы на Java с StreamApi, Function, Optional, Consumer и тп. в JS вся эта структура кажется сложнее, хотя плюс минус тоже самое. Для меня самое сложное было понять как работают кастомные хуки в реакте, как я понимаю это также все выходит из ФП, но так как в java нет прямой аналогии для меня это выглядело как магия

[@Aristockij]

это что хоть такое-то? я неделю всасывал урок по вебпаку и тут нннныа и еще один видос подъехал! мне хотя бы половинку такой продуктивности

[@sattorerror]

безусловно лайк!

[@user-frond-end_dev]

Карта развития или учебы для самостоятельного изучения есть у тебя?

[@awenn2015]

44:55 у меня вопрос, как типизировать такие каррированные функции? Тупо возвращать function и результат?

[@psycho0sis]

очень интересно, спасибо!

[@user-on4lv7lc9k]

Хороший монтаж. Люблю твои видосы связанные с теорией, оч круто обьясняешь (любимый ролик про eventLoop ) но вот видосы где ты пишешь код и обьясняешь мне не подходят, вообще не понимаю твоей подачи((

[@Redracer228]

Надеюсь Ангуляр выйдет хотя в текущем десятилетии 😂

[@UlbiTV]

Я тоже 😂😂😂😂

[@404Negative]

да кому он нужен этот онгуляр

[@abylaev8233]

like

[@Vadym_Lantukh]

Дуже чудовий розбір, мені як новачку дуже пізнавально

[@yakut54]

Феноменально! Как и всегда. Снимаю шляпу!

[@Feniks20000]

Спасибо за ролик, как всегда, качественно и наглядно

[@grigoryveynin8553]

Спасибо за ролик! Я не специалист в ФП. Понравилось объяснение функторов и монад. Кажется мир ФП может много чего интересного принести в решение рутинных задач)

[@alexstepanchhuk683]

Как всегда супер-годный контент!!!! Спасибо!

[@alexsibrin715]

Дай бог тебе здоровья мужик

[@dmitriynemkov1380]

В какой программе презентацию делаешь?

[@vetero4eg]

Уникальный Ulbi, спасибо! Как всегда, очень крутой контент.

[@03Rai]

благодарю ♡. топчик 😍

[@andrewkruchini8614]

Отличное изложение. Только много опечаток. На 37:37 не выдержал.

[@n1kaka]

Сразу лайк и коммент, огромное спасибо за видео😊

[@ada280202]

На 50:45 разве g и f справа от знака равенства не перепутаны?

[@user-sc5qy2zw9s]

Можно ли считать reducer чистой функцией, если у него дефолтное значение - переменная, определенная выше

[@UlbiTV]

Можно) это аргумент, такой же, просто с дефолтным значением, на чистоту не влияет

[@user-fw1ws8lr8n]

Очень круто и информативно! Спасибо ♥️

[@victormog]

Видео - просто бомбическое! Может развить его плейлистом с более конкретными и практическими примерами?..

[@KaHcTpykTap]

Посмотрю потом, лайк поставил.

[@tuku_mann]

37:38 здесь опечатка на слайде или я не уловил мысль?

[@TarasovFrontDev]

Про контейнеры на 48:00 я совсем не понял. Каким образом мы данные инкапсулировали, если они доступны через свойство инстанса?

[@nabijonazamov3695]

Good mentor

[@talantasanov4973]

видео топ(пока не смотрел, но знаю это))

[@crap2680]

Хорош, братан, контент в кайф, давай еще, ваще красавчик, можно вот этого вот почаще?

[@user-hu1gl5lw3p]

вижу новый видос ставлю лайк

[@t-boxcollectionshop9621]

😘😘😘

[@LenaFelica_songwriter]

Супер, супер, супер !! Спасибо❤

[@skyranor6854]

Спасибо за труд!

[@itproust]

Топ)

[@user-zk3bc1lf8k]

Лайк!!!!

[@Ramosok]

Огнище огненное!! супер контент! спасибо!

[@VolodymyrChernigiv1300]

Ого, нічого собі, оце крутяк. За такий контент треба донатить

[@olg3089]

Вот это тема

[@blatov]

🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰

[@vasil_astrov]

Оч круто, спасибо! Благодарю

[@HaywasterChannel]

Видео крутое, без споров молодец, но у меня все же есть пара вопросов: 1) Почему не рассмотрена тема рекурсии? 2) Иммутабельный подход требует постоянного создания копий. Это значит, что у нас постоянно выделяется память для их хранения, что не есть хорошо. Допустим то же использовние .map.filtet в конечном итоге создаст нам целых две копии. Этот момент как-то обрабатывается в JS? Ведь хотелось бы, чтобы конечный код хорошо работал и минимально расходовал память

[@awenn2015]

Сборщик вроде сразу удаляет неиспользуемые данные

[@user-pw6gz6jh3i]

наконец-то достойная тема)

[@user-tb5tp2tv6x]

Спасибо Круто!!! Ждём nextjs 14 версию))

[@tednaaa]

капец крутой видос) примерно 2 года слышал постоянно в обсуждениях монады монады, не понимал что это вообще такое, а оказывается вон оно что) спасибо тебе добрый человек что объяснил) кстати, планируется ли в канале уроки по другим языкам по типу Rust, Go?

[@user-nh8um2dn9s]

Спасибо за информацию. Довольно интересные подходы. И понимания в этом направлении стало побольше. :)

[@TheArkan777]

15:18 5 * 5 * 5 = 125

[@404Negative]

он же об этом и говорит, что MODIFIER могут поменять. неужели это не очевидно ?