Функциональное программирование от А до Я. ФП на 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]

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

[@-Forever-Young-]

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

[@LeonidPolyakov]

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

[@midrala]

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

[@UlbiTV]

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

[@sidless3862]

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

[@user-kw8cq6cd6y]

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

[@nikitatimofeenko9351]

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

[@user-yq6vo5vb9p]

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

[@user-cd7iz2iv8h]

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

[@Michael-bf7pm]

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

[@UlbiTV]

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

[@Aantonya]

Спасибо за то что ты делаешь. Я пошёл учится фулл стеком и твои видео всегда дают много знаний даже когда я не знал джс. Качество контента просто топ

[@Kokurorokuko]

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

[@flame_____]

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

[@falsetrue7910]

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

[@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 будут выведены автоматически.

[@user-yt9he6ud5r]

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

[@awenn2015]

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

[@aliicomua1369]

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

[@user-uk1cu2hm2f]

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

[@ode2877]

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

[@konstantinsologub9568]

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

[@UlbiTV]

Спасибо!

[@adelinaromanova8353]

Лайк! 🎉

[@solovievss]

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

[@user-gk1yb3vp4b]

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

[@nikman5541]

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

[@tahrizade]

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

[@user-dw8lb8lc7u]

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

[@Roger-qj4wu]

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

[@kowkavn2356]

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

[@barbatage5078]

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

[@helenit4365]

Да!!!✨️🌟🔥

[@user-zb3fy2je8b]

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

[@lolimon58]

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

[@user-rw3gf4te4e]

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

[@MAKS-FISHER]

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

[@Bespokerug]

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

[@UlbiTV]

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

[@maratvaliev8642]

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

[@VolodymyrSirenko]

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

[@ammoney159]

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

[@nk_77777]

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

[@eunicsi]

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

[@barbatage5078]

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

[@miRorshik]

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

[@yohohowowowo9471]

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

[@user-hy4qw4ki3o]

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

[@user-frond-end_dev]

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

[@sattorerror]

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

[@musicthreads]

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

[@alexsibrin715]

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

[@samiracle9852]

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

[@Sershir]

Спасибо

[@victormog]

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

[@tesohi]

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

[@kristinavolk2660]

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

[@abylaev8233]

like

[@andrewkruchini8614]

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

[@WinchesterD]

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

[@HaywasterChannel]

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

[@user-gd4vi6fv1z]

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

[@Feniks20000]

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

[@psycho0sis]

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

[@talantasanov4973]

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

[@givename48]

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

[@yakut54]

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

[@awenn2015]

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

[@Ramosok]

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

[@user-hu1gl5lw3p]

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

[@inriinriinriinriinri]

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

[@alexstepanchhuk683]

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

[@dmitriynemkov1380]

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

[@user-fw1ws8lr8n]

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

[@n1kaka]

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

[@KaHcTpykTap]

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

[@ada280202]

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

[@Vadym_Lantukh]

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

[@grigoryveynin8553]

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

[@awenn2015]

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

[@user-on4lv7lc9k]

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

[@user-sc5qy2zw9s]

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

[@UlbiTV]

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

[@03Rai]

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

[@tuku_mann]

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

[@crap2680]

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

[@TarasovFrontDev]

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

[@skyranor6854]

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

[@nabijonazamov3695]

Good mentor

[@yggllen]

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

[@Aristockij]

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

[@user-wu8zt4we5n]

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

[@Redracer228]

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

[@UlbiTV]

Я тоже 😂😂😂😂

[@404Negative]

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

[@LenaFelica_songwriter]

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

[@blatov]

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

[@ublastbeat9165]

сюдыааа

[@mr.pickles7853]

Думаю поступить в институт на программиста,что скажите?

[@itproust]

Топ)

[@TheArkan777]

15:18 5 * 5 * 5 = 125

[@404Negative]

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

[@VolodymyrChernigiv1300]

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

[@user-kv9ur9hi4n]

на 19.09 функция меняет переданный в нее массив. ???

[@user-zk3bc1lf8k]

Лайк!!!!

[@t-boxcollectionshop9621]

😘😘😘

[@olg3089]

Вот это тема

[@user-tb5tp2tv6x]

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

[@wagnerslon]

Надо курс по нексту

[@user-pw6gz6jh3i]

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