у меня много пет-проджектов и для каждого нужно настроить минимальную сборку

для книжки по функциональному программированию тоже захотелось иметь среду выполнения

конечно же create-react-app для этого случая слишком мощен (да и местный линтер меня раздражает), так что я взяла парсель и накрутила минимальной функциональности. В данном случае это — еслинт, рамбда и лоудаш

и всё бы хорошо, но вс код из коробки не умеет в динамические импорты, а без динамических импортов хочется только упасть и лежать. За них отвечает babel со своими миллионами плагинов, которые с первого раза никогда не работают

так что я написала небольшую заметчк:
https://medium.com/@twanttobealighi/%D0%BA%D0%B0%D0%BA-%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B8%D1%82%D1%8C-%D0%B4%D0%B8%D0%BD%D0%B0%D0%BC%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5-%D0%B8%D0%BC%D0%BF%D0%BE%D1%80%D1%82%D1%8B-%D1%87%D0%B5%D1%80%D0%B5%D0%B7-babel-ceebc0bc7361

функция chain из lodash

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

обязательно нужно вернуть результат через .value()

пример:

_.chain('mememe')
  .capitalize()
  .value();

//Mememe

пример посложнее:

_.chain([36, 40, 1, 3, 1, 1, 1, 1])
  .sort((a, b) => a - b)
  .uniq()
  .value();

// [1, 3, 36, 40]

тут важно заметить, что uniq это тоже лоудашевская функция, доступная внутри chain без _

функция высшего порядка это функция, которая в качестве аргументов принимает другие функции или возвращает функцию в качестве результата

например onEventListener

button.addEventListener("click", function() {
  //do stuff
})

декоратор это функция, которая расширяет функционал переданной ей функции

пример:

hoc — функция, которая принимает компонент и возвращает новый компонент с расширенным функционалом

то есть hoc это частный случай декоратора
https://reactjs.org/docs/higher-order-components.html

вчера обсуждали с коллегами, решила записать

вернёмся к фп

_.chain(persons)
     .filter(isValid)
     .map(_.property('address.country'))
     .reduce(gatherStats, {})
     .values()
     .sortBy('count')
     .reverse()
     .first()
     .value()
     .name;  //-> 'US'

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

в _.chain ничего не выполняется, пока не будет вызвана функция value() — где-то здесь и начинаются отложенные вычисления

_.mixin позволяет добавлять в лоудашевский (не только) объект свои методы

пример

  _.mixin({
    test: () => 'hello world',
  });


  const res = _.test();

  console.log(res);
// hello world

обратим внимание на вот такой объект примеси:

  _.mixin({
    select: _.map,
    from: _.chain,
    where: _.filter,
    sortBy: _.sortByOrder,
  });

он делает js-код похожим на sql-запрос

_.from(persons)
   .where(p => p.birthYear > 1903 && p.address.country !== 'US')
   .sortBy(['firstname'])
   .select(p => p.firstname)
   .value();

sql супир

Рекурсия

Понять рекурсию несложно, нужно научиться мыслить рекурсивно

вот простая рекурсивная функция:

function sum(arr) {
   if(_.isEmpty(arr)) {
      return 0;
   }
   return _.first(arr) + sum(_.rest(arr));
}
sum([]); //-> 0
sum([1,2,3,4]);

у неё есть базовая ветвь или условие возврата
в нашем случае вот оно:

   if(_.isEmpty(arr)) {
      return 0;
   }

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

1 + sum[2,3,4]
1 + 2 + sum[3,4]
1 + 2 + 3 + sum[4]
1 + 2 + 3 + 4 + sum[]
1 + 2 + 3 + 4  -> halts, stack unwinds
1 + 2 + 7
1 + 9
10

из-за множества вложенных контекстов, с производительностью у рекурсии не очень
но есть способы это оптимизировать, ето я узнаю только в седьмой главе (сейчас я на третьей)

ирл рекурсия чаще всего используется чтобы выпендриться на собеседовании или обойти древовидную структуру данных (дом-дерево например)

дальше в книжке идёт несколько длинных примеров кода создания древовидной структуры и методов её обхода

главное что стоит запомнить:
- в родительском узле есть дети, а у детей есть ссылки на родителей
- в этом случае мы обходим дерево в ширину (а можно ещё и в глубину или рандомно или еще как-то)

условие возврата тут находится в строке 17 — return tree

изначально дерево ето null так что мы его создаём с переданной снаружи нодой
строку 8 можно пропустить

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

и когда все дети проверены и у текущей ноды нет детей мы возвращаем дерево

это всё довольно запутано, но доступно для понимания при троганьи руками и консоль.логами

при желании трогать можно здесь:
https://livebook.manning.com/book/functional-programming-in-javascript/chapter-3/193

важная картинка

Композиция функций

Это процесс группирования сложного поведения, разделенного на простые задачи

Главное преимущество — отделение описания функции от её вычисления

например

const str = `We can only see a short distance  ahead but we can see plenty there that needs to be done`;

const explode = (str) => str.split(/\s+/);

const count = (arr) => arr.length;

const countWords = R.compose(count, explode);

Данная программа начнет вычисляться только когда произойдет вызов функции countWords

пример: