Чудовищно функциональный JavaScript
Vložit
- čas přidán 27. 06. 2024
- Знать и уметь как укрощать функцию должен каждый разработчик Фронтенда. Но путь к этому навыку тернист. В этом выпуске поговорим об основах функционального программирования!
0:00 Пролог
01:12 Библия функционального программирования и чистота
03:00 Состояния функций
04:35 Изменчивые друзья
07:06 Декларативность VS Императивность
11:32 Функции Первого Класса
13:34 Гордые функции высшего порядка
13:58 Компоненты высшего порядка в Reactjs
14:43 Композиция как сердце и душа
17:26 Старое доброе Каррирование
______________________________
Один из моих самых любимых каналов о Фронтенде в telegram:
t.me/frontendnoteschannel
______________________________
Файлик с некоторыми примерами
codesandbox.io/s/focused-kate...
Компоненты высшего порядка в React js
ru.reactjs.org/docs/higher-or...
_____________________
Для видео я использовал материалы из этих статей:
1) maddevs.io/insights/blog/func...
2) www.telerik.com/blogs/functio...
3) opensource.com/article/17/6/f...
4) blog.bitsrc.io/functional-pro...
5) learn.javascript.ru/currying-...
Спасибо авторам, хоть многие из них никогда не посмотрят эти видосы из-за языкового барьера)
#JavaScript #reactjs #functionalprogramming #frontend
Тренажеры HTML Academy (HTML, CSS, JS, React) + Академия + Книга рецептов фронтендера + комьюнити
за 99 рублей:
boosty.to/how-to-learn-it
Какие тренажеры бывают:
htmlacademy.ru/courses#fe-start
Подписывайтесь:
t.me/howToLearnIT
______________________________
Файлик с некоторыми примерами
codesandbox.io/s/focused-kate-hq4ef?file=/src/index.js
Компоненты высшего порядка в React js
ru.reactjs.org/docs/higher-order-components.html
_____________________
Для видео я использовал материалы из этих статей:
1) maddevs.io/insights/blog/functional-programming-principles-in-javascript/#first-class-functions
2) www.telerik.com/blogs/functional-programming-javascript
3) opensource.com/article/17/6/functional-javascript
4) blog.bitsrc.io/functional-programming-in-javascript-how-and-why-94e7a97343b
5) learn.javascript.ru/currying-partials
Спасибо авторам, хоть многие из них никогда не посмотрят эти видосы из-за языкового барьера)
#JavaScript #reactjs #functionalprogramming #frontend
Maddevs из Кыргызстана
Красавчик!
Какие же чистые у тебя ролики.
А композиция то какая!
С таким уровнем объяснения, и раскрытия важностей тем, вы должны быть на пьедестале среди ютуберов по js
Очень грамотно объясняет !
с таким уровнем обьяснения я бы блокировал на ютьбе. Потому, что ровно ничего из того, что сказал автор не является правдой. Все это следствия из FP а не его суть. Все эти следствия вытекают сами собой из самой сути FP. Иными словами не нужно знать набор всего что сказал автор видео, что программировать в FP парадигме. Но программируя в FP парадигме, все что рассказал автор - будет следствием само собой без участия в том программиста.
Я очень рад, что в ютубе появляется всё больше крутых каналов на тему программухи.
Вот еще +1 в мои подписки.
Спасибо за ваши видео)
Спасибо за контент, жду вторую часть
Очень крутой видос. С нетерпением жду продолжение.
Спасибо большое за такие видео
Желаю успехов на ютубе)
Спасибо =)
Дружище. Продолжай! Формат заходит на отлично!
Уроки кайф, на чиле на расслабоне рассказываешь крутые технические моменты
классный видос, хорошая подача и монтаж, спасибо
Наконец-то мне замыкания стали понятными!!! супер спасибо
Спасибо за такое шикарное вступление в мир ФП!
Большое спаибо за ролик. Монтаж - кайф. видеоряд изумителен)
Благодарю за контент
Благодарю, все по делу.
Это алмаз среди каналов!
Годный контент, спасибо
После такого видео не грех и подписаться, да что уж там и колокольчик зажать тоже!!!!😅
Спасибо, очень познавательно!
Спасибо за ролики! 17:24 да, обёртка очень удобная и качественная получилась. Это первое применение reduceRight на практике, которое я увидел))
Скоро, кстати, в этом отпадёт необходимость потому что в js подвезут оператор удобного чейнинга |>
Ооочень годный видос🔥🔥🔥
люблю ютуб за эту рекомендацию. очень годный контент на этом канале.
Клёво объясняете и юмор сочный! Абстрактные понятия демонстрируемые на конкретных примерах становятся легче для понимания 👍 Вам спасибо! ютубу длинный коммент....
Вау! Спасибо большое!
На функциях высшего порядка мой мозг поплыл. Ну что ж, будем разбираться)
Отличное видео и подача!!
Мне кажется, ты посчитал 11 Самых богатых людей
Супер!!!!
Спасибо
Вы мощь
Отличный и качественный контент! Продолжай в том же духе! )
Отлично) Но оч не хватило в части про каррирование фразы про частичное применение. Та функция которая запомнила дату например.
Просто талант!👏🏻👏🏻👏🏻
Спасибо! Полезный контент
Привет!
Спасибо за полезный контент!
Подскажите пожалуйста, когда ждать вторую часть про ФП ?)
Чел, ты классный! Реально! Почти никогда не пишу такие комментарии, но тебе респект!
Отличная подача, так дежать!
Благодарю =)
Классные ролики ) на уровне
Круто! Вот также бы доступно кто изложил, но про монады, функторы, моноиды.
Здравствуйте! Отличная подача материала! Мой вопрос, а где же вторая часть?
Очень круто объясняешь!
Лайк, подписка от меня!
спасибо, очень полезно)
вив лав фром май харт! бест оф ве бест! Если серьезно: просто супер доходчиво! Крайне замечательно!))))
Мой любимый Мутко!) Даже не хватает его сейчас!
Спасибо =)
Отлично, правда было слишком быстро :) Теперь пойду ломать голову своим коллегам :)
Пожалей ребят, они не виноваты =) Да возможно где-то я излишне ускорялся, хотел влезть в формат 20-ти минут
Тимур одобряет, очень хорошо сделал
Спасибо Тимур! У тебя тоже классный канал!
@@it2138 но, говорят, непонятный)
Императивный подход отвечает на вопрос как это делать?
Декларативный подход отвечает на вопрос что делать?
Но всегда помни, что под капотом любого декларативного подхода лежит императивный.
ПСасибо, супер инфа
Никогда не понимал чем отличается по сути декларативное программирование от императивного. Как по мне все примеры, которые есть в интернете просто демонстрируют декларативный интерфейс просто как использование более абстрактных и высокоуровневых интерфейсов (типо не открой холодильник, достань банан, закрой холодильник и дай мне банан, а "хочу банан!"). Какая принципиальная разница то? Ну да, мы на другом уровне абстракции, и что?
Такие же мысли! В декларативном примере есть императивность, мы указали КАК делать. Асимптотически приближаемся к декларативности. Например, нужно посчитать общую стоимость в Корзине, придется указывать КАК это сделать.
Имхо, нужно проще: есть повторяющиеся наборы команд, тогда неплохо объеденить их в одну. Вот вам и декларативное программирование 👍
А то разбирать код, где всё декоративно с дурацкими названиями, и код этих декларативных функций надо искать непонятно где, и эти декларативные используются только один раз... Ну это полный трэш. Тут только один вывод: у этого программиста было очень много лишнего времени, раз он решил так заморочиться.
це було чудово
Черт побери, мало того, что материал структурированный, осознанный и грамотно поданный, так еще и видео ряды и вставки радуют глаз. Откуда ты их берешь?
5:35 - Петька и Василий Иванович
Привет! Зашел посмотреть видос из рекомендаций
Так понравилось обьяснение принципа функционального программирования, что капец
Но я не нашел следующей части...
Ждать ли ее?
Ну это точно лайк:)
Привет автор. Можешь объяснить про столбец "Нет состояниям", который есть на 11:10?
Смотрю из ванны. Начал чистку с себя.
Главное - помнить, что под капотом любой декларативщины лежит импративщина! Хахаха)))
Я бы еще добавил всё-таки 5 столп - ссылочная прозрачность)
Экстримцоде отлично сказали про императивность/декларативность, а именно:
Если мы детали прячем из одной функции в другие, мы все равно в императивном ключе описываем каждый шаг)
Какой же крутой видос, просто произведение искусства
Спасибо тебе за ролики, все отлично)
Не будет роликов про Vue? Очень хотелось бы
Даа, подумываю что можно снять по vue)
то что ты назвал сайдэффектом - им не является, это называние недетерминированная функция, то есть функция, которая работает непредсказуемо в зависимости от окружающих условий
сайд эффект - это наоборот, влияние на окружение, то есть например, если твоя функция будет детерминированной(то есть всегда при вызове с теми же аргументами, возвращать один и тот же результат), но будет писать в лог или менять какие-то глобальные переменные, отсылать что-то на сервер - это и будет сайд-эффектом :)
ps сам из FE и обожаю фп, юзаю rescript, советую попробовать)
маслята схавают
При этом в слух он проговорил правильное определение, там только на картинке косяк.
Спасибо огромное тебе! Я действительно допустил ошибку на монтаже и мне очень стыдно сейчас!
Про детерменированность тоже классное замечание.
Я обязательно в следующем выпуске про фп расскажу про свой косяк. Ещё раз спасибо!
@@it2138 ничего страшного, все мы ошибаемся :) в любом случае это полезное видео
не много разобью вашу уверенность в себе, не результат возвращать а сигнатуру
Офигенный
Подписался по совету друга
Почему так хорошо
Декларативность на одном уровне абстракции - это императивность на другом.
А теперь давай про монады и функторы
Спс, на карировании я просто поплыл
Пример с чаем в декларативном виде не совсем верный. Скорее это будет как-то так.
заваренный чай это опущенный в кипяток пакетик с зеленым чаем, где кипяток это вода разогретая до 100 градусов в чайнике
5:40 конечно! моя самая любимая серия квестов... Петька и Василий Иванович (он же ВИЧ )
Ооо даа) У меня с ним детство ассоциируется
Одна просьба к адептам ФП - пожалуйста, не тяните на фронт клужуру)))
Давай вторую, часть про монады Maybe \ IO \ Either и комбинаторы с апликаторами и про лифт не забудь) и генераторы с рекурсиями для асинхронки) асинхронка самое то
Пишешь фронт на кложуре?
Иди на Лиспе программируй)))
Мда, 20 лет пишу на вэб, 20 лет его учу, каждый пример который я видел можно записать кучей способов и каждый будет иметь свою изюминку. Видео отличное, за объяснение лайк. Теперь надо подождать и посмотреть как все это добро приживется на практике, как оно пройдет испытание временем.
3:58 В примере слева должно быть `return ++number`
У меня мозг чуть не взорвался.
Кучу раз в рекомендациях этот канал показывал мне Ютуб, пропускал. Теперь жалею что потратил время не на твои видео)(
Огромная благодарность вам за ваши труды, нравится как и сам материал так и подача - все в ваших роликах безумно полезно!
P.S. Но вот лично мне эти мультяшные вставки не очень нравятся, они отвлекают внимание, я бы их убрал)
Астанавитес! Столько инфы в момент времени - это больно!
Я забыл стоп-слово
Object.assign и spread создают копию только верхнего уровня свойств. А дочерние передаются по ссылке, что ни коим образом не гарантирует иммутабельность.
Чтобы честно скопировать, не обойтись без рекурсивного копирования.
А если объект неприлично огромен, копирование будет не эффективным и нужно применить другую технику.
В общем, это я к тому, что наш мир не идеален )
Не всё так просто, как в книжке пишут )
Даа, только на этот случай существует рекомендация в функциях работать с плоскими объектами. То есть работать с одним уровнем глубины.
Нужно изменить что-то во вложенном объекте - пора идти в другую функцию.
Применение deepCopy - это плохо с точки зрения оптимизации. Чтобы в одной функции создать один полностью новый объект приходится пройтись по всему дереву свойств. Хотя в подавляющем числе случаев это не нужно
4:14 . Есть проблема. Функция не инкрементирует переменную, а просто прибовляет 1.
Если я вижу функцию increment(var). Я ожидаю что var будет больше на единицу, а не функиция вернет мне var +1;
В таком случае функция должна называться getPlusOne(var).
Очень плохой пример...
Согласен, и вообще, видео довольно сильно вводит в заблуждение на счёт всех этих тем, лучше курить мануал по всем этим темам и обучаться по этапно, чем слушать супер сокращённую интерпритацию. А это видео скорее просто развлекательное чем обучающие.
Спасибо за великолепную подачу полезного материала.
Мне кажется что, интуитивно понятней когда в compose функции передаются в том порядке в котором они отрабатывают и когда используется reduce, а не reduceRight. Мы же чейним вызовы по порядку: вначале - первая, в конце - последняя, то есть слева - направо и сверху - вниз. В противном случае можно поломать себе мозг простым вписыванием аргументов, описывая действие от конца к началу. Дело в том, что из книг я вынес именно ту реализацию compose, которую считаю понятной. Но время от времени в ютубе натыкаюсь на такую как в видео и хотел бы понять, в чём смысл перевёрнутого compose?
Я предполагаю что это идёт от хода выполнения вложенных функций, то есть сначала выполняеться самая вложенная(правая) и идёт налево.
@@user-dl4eh1bd4z Да. Если нагородить ад вложенных вызовов, то внимательный взгляд может заметить пространственное смещение первого вызова вправо. Но это только кажется. На самом деле первый вызов уходит куда-то туда, в глубину экрана, что заставляет нас реализовать позицию "сзади к переду"
На мой вопрос ответил Григорий Бизюкин в видео про фун-ое пр-е, где объяснил разницу между pipe и compose
@@andreygokhan6893 Да прости, я тоже хотел ответить. Очень хороший вопрос!
Действительно есть противоположность для compose - pipe
dev.to/benlesh/a-simple-explanation-of-functional-pipe-in-javascript-2hbj
Про пайпы я хотел рассказать в серии про Реактивное программирование
паходу вы не поняли основную идею композиции, идея со стоит в том что бы передать данные по цепочке обратно управляющей функции, так как функции первые в цепочке могу стать управляющими в случае нужды, нельзя просто передавать аргументы "вперед", так как идея в том что бы вернуть измененные данные обратно, а каждая новая, в цепочке добавляет изменяемости, наоборот это очень удобно, когда с конца, так же не забываем по Y комбинаторы, которые разбивают нашу цепочку, на мелкие композиции
советую вернутся и ещё раз прочитать книги и только теперь внимательно, так как в книгах идет именно этот пасыл, а вы обратно тянитесь к императивному стилю...
Годный(говнокод)(обычно (такое(кодревью(не, проходит))))
Красиво сделал))
Когда прочитал название первой части видео: "Пролог", уже в холодный пот бросило
Ну слава богу! С этой целью и писал)
А то, что в реакте мы работаем со стейтами, - это не считается нарушением принципов фп?
4:00 постфиксный инкремент вернёт прежнее значение, то есть единицу.
2:11 Впервые услышал чтобы someNumber прочитали как самнамба) Звучит как танец или кобра)
Где-то прочитал классный коммент примерно следующего вида:
"Что вы прицепились к этой иммутабельности? В Unity, например, где махровый ООП, всё мутируется и перемутируется и только фронтеры вдруг решили, что для двигания кнопко-формы нужна иммутабельность".
Честно говоря, я тоже не понимаю этой повёрнутости.
Кто-нибудь, пожалуйста, приведите РЕАЛЬНЫЙ пример, который показывает, что вот тут функция изменяет внешний объект\переменную и это плохо.
Почему жаваскрипт тормозит?
Тут ответы на этот вопрос!
ФП - это жалкая попытка представить себе идеальный мир, которая разбивается об жестокую реальность, против которой не попрешь!
Увы! И ах!
И тормоза реакт сайтов бывают очень заметны на старых моб устройствах и компах, где меньше гига ОЗУ.
На более современных устройствах - тормозов не видно. Но батарею садит быстрее. И это реально так!
Какой же ахуeнный контент!!!
Привет, замечательно рассказываешь, так держать и успехов тебе!) Столкнулся с проблемой в каррировании)) забавная штука, но в консоли твой код при вызове с 2мя параметрами:
console.log(curriedSum(1)(2));
результат:
ƒ (...args2) {
// Снова вызываем curried, конкатенируя аргументы двух функций
// console.log(args)
return curried.apply(this, args.concat(args2));
…
undefined
, а по идее эта тема должна позволять запуск ф-ции с 2мя параметрами? и в чём подвох?!
Возможно что ты-что то не так "перепечатал" )))))))))))))))))))))))))
const a = curriedSum(1) - должен вернуть функцию ;
const b = a(2) - ты ожидаешь - результат (значение)! ...а у тебя, снова, возвращается - функция!
...не знаю какой у тебя там уровень вложенности, но напрашивается вывод, что твое выражение должно быть сл.:
console.log(curriedSum(1)(2)( 3 ));
Кнопка со скобкой не отвалилась?
8:27 метод sort с такой callback функцией сортирует элементы по возрастанию, поэтому первыми будут самые "бедные" люди
В целом видео хорошее, но есть ошибка, вызванная недопониманием терминов.
Чистота функции определяется двумя параметрами:
1. Детерминированность/идемпотентность, т.е. функция при одинаковом наборе аргументоа всегда возвращает один и тот же результат
2. Отсутствие побочных эффектов, т.е. функция не модифицирует внешние данные
На 2:48 функция зависит от внешней переменной, т.е. она не идемпотентна, но сайд эффектов при этом не имеет.
Ровно поэтому, например, функция Math.random() не чистая.
Программа, которая состоит только из чистых функций ничего не делает. Поэтому, в том, что программистам платят за сайд эффекты, Владимир Гомонов прав)
пля вы заипали маслята, если тырите определения, не имея понятия что оно означает, хоть потрудитесь не с вики брать
"один и тот же результат" - нет пля, не результат не что-то другое, а сигнатуру, передал ты массив, будь добр верни массив, передал строку, дальше додумай..
@@alexpipin3693 А если функция принимает два аргумента, массив и строку, что по твоей логике она должна вернуть? Если функция принимает массив, она не может вернуть строку? Вот это не чистая функция (arr) => arr.join()? Если функция при одинаковых аргументах возвращает разные значения, она чистая? Вот это чистая функция (num) => num * Math.random()? Научи думоть плез, а то я запутался
Увидеть код на проекте в котором есть чистые функции, это все равно что найти воду в пустыне)))
Ну не все же так плохо) Мне кажется чистые функции наоборот более менее все научились использовать
8:45 11 вышло)
6:50 и dart с вопросом: а что нельзя было делать неявные setter'ы для полей... ладно, но я всё равно их буду создавать :)
Ради бога =)
может я чë-то не понимаю, но с чистыми функциями не добиться иногда нужного результата и приходиться заводить внешние переменные
Вот честно, не дай бог чтобы все это начали писать в проектах. Так как это просто будет жопаболь для других прогеров. Пиши императивно добавляя декларативность немного, декомпозируй функции и называй их правильно и читаться будет легко, как книга и мозг и глаза в целости будут. Да декларативщена короче, но зачастую хрен поймешь что внутри твориться, особенно если ее писал какой нить дятел который переменные называет одной буквой.
10:30 -- Буква S в SOLID всё ещё нарушена: функция сортировки также создаёт копию данных
Вообще смысл рефакторинга в сокращении сложности кода. Результат же чудо-рефакторинга на экране читать сильно сложнее, и вовсе не потому, что он длиннее. Код стал безумно вязким -- он полагается на порядок вызовов. И нет, в таком виде ты НЕ переиспользуешь логику. Ты нагородил одноразовых функций.
Неужели сами стрелочные функции вынести наружу сложнее? А после их комбинировать в хвост и в гриву?
Общее замечание к видео -- ты не понимаешь, о чём говоришь. Нахвататься общих слов и комбинировать их в верных грамматических формах могут даже попугаи, но ты же программист, в конце концов.
Согласен с вами. Когда сократили функцию было все супер и понятно (конечно если супер придраться то можно и придраться статические значения в slice) . И оно не выполнял 3 задачи а одну (высчитать топ 10 самых богатых). Многие путают что S в солиде означает что функция должна выполнять только одно действие, но этот принцип совсем другой. S больше относиться больше к модульности и разделению по логике (бизнес логике и реализации, и не только). Но думаю для объяснения текущей темы про функциональное программирование с мини примерчиками хватит. Если разбирать то этот ролик зардулся бы на несколько часов с кучей философии)))
Свойство функции, которая при вызове с одинаковыми значениями параметров всегда всегда будет давать один и тот же результат называется "ссылочной прозрачностью".
Если функция обращается к некоторому элементу в своей области видимости, который не обладает ссылочной прозрачностью, то и сама функция также не обладает ею. Но такое положение дел можно исправить, переместив непрозрачный элемент в параметр. Несмотря на то что такой шаг перекладывает ответственность на вызывающую функцию, часто можно получить немалую выгоду от создания четко определенных модулей со ссылочной прозрачностью.
Если функция всегда возвращает одинаковы результат при одних и тех же аргументах - это не значит, что она чистая. Это называется «детерминированность». Под капотом она может влиять на состояние из вне, но возвращать одно и то же. Чистая функция - это та, что не изменяет состояния приложения. И все.
Такой вопрос. В ФП чистой функцией считается, детерминированная функция без побочных эффектов. А недетерминированная функция тоже имеет право называть себя чистой функцией, при условии, что она не будет изменять внешнее окружение или состояния приложения?
Что-то по поводу чистоты функции half... сложились сомнения! С чистотой вообще очень спорный вопрос... Чистая функция - УНИВЕРСАЛЬНАЯ функция! Когда в ней нет "магических" значений, а есть только реализация операции, ...иначе (в качестве побочного эффекта) гарантированно получаем необходимость создавать + еще одну функцию (например), которая будет делить не на 2, а (скажем) на 3!!!
function divider( a, b ) {
return a / b ;
}
function multiplier( a, b ) {
return a * b ;
}
function sum( a, b ) {
return a + b ;
}
function calculations( a, b, processor ) {
return processor( a, b );
}
const A = 4 ;
const B = 2 ;
const results = {
div: calculations( A, B, divider ),
inc: calculations( A, B, multiplier ),
sum: calculations( A, B, sum )
}
15:55
проблема частично решается новым оператором "|>"
так, что-то я подвис )