Пять интересных способов использования Array.reduce() (и один скучный путь)

Но это был не мой пример ) Похоже вы спутали меня с его автором.

Пять интересных способов использования Array.reduce() (и один скучный путь)

Нет, ибо редьюс кроме своей прямой обязанности объединения — ещё берёт на себя обязаность по фильтрации и маппингу.

Не согласен. Прямая обязанность редьюса — «… преобразование структуры данных к единственному атомарному значению...». Что будет сделано в процессе и каково будет атомарное значение — неважно. Например, поиск минимального и максимального значения массива — это тоже свёртка.

Пруфы: в Functional Programming with Bananas, Lenses, Envelopes and Barbed Wire явным образом в числе примеров катаморфизма (с т. з. теории категорий функция свёртки является катаморфизмом) перечислены и нахождение длины массива и фильтрация.

Пять интересных способов использования Array.reduce() (и один скучный путь)

Прошу прощения, если ввёл в заблужение. Для меня map/reduce как функтор/свёртка неотделимы друг от друга. То есть и map и reduce одинаково могут быть декларативны, если они декларативно реализованы в коде.

И тем не менее, повторюсь, Что костыльного или магичного в Promise.all(imgs.map(asyncLoad));?

Пять интересных способов использования Array.reduce() (и один скучный путь)

Понял вас. По большей части согласен. Кроме одного момента.

Главная задача reduce, как свёртки — «… преобразование структуры данных к единственному атомарному значению...» (Википедия). То есть для реализации функции renderHufflepuff семантически он подходит идеально — берётся массив, обрабатывается, из него получается строка.

А вот эта реализация как-раз «несемантична» и некорректна:

function renderHufflepuff (wizards) {
  return '<ul>' + wizards.filter(isHufflepuff).map(renderWizard) + '</ul>'
}

Некорректна, потому что пропущен .join('') в конце; несемантична, потому что задача map (в данном случае как функтора массивов) — преобразовать из одного массива в другой с сохранением количества элементов; задача filter — удалить элементы из массива. Но, результатом их работы всегда должен быть массив! А вот если задача из массива получить строку — семантично использовать reduce ).

С другой стороны в JS Array#join — это частный случай свёртки. В конечном итоге получается, что оба варианта реализации renderHufflepuff через wizards.filter(isHufflepuff).map(renderWizard).join('') и reduce одинаково семантичны.

Пять интересных способов использования Array.reduce() (и один скучный путь)

Костылём?! Что костыльного или магичного в Promise.all(imgs.map(asyncLoad));? Чистый и понятный код.

Что значит «никакой декларативности»? Я говорю движку — пройдись по элементам массива imgs и к каждому примени функцию asyncLoad, результаты собери в массив и прокинь его в then; как ты это сделаешь — мне не важно. Это абсолютно декларативно.

Пять интересных способов использования Array.reduce() (и один скучный путь)

Зачем использовать для этого несемантичный редьюс? Хотя, конечно, в этом случае значительно лучше было бы написать так:

Я никак не могу понять, какое значение вы вкладываете в слово «семантичный»?

Пять интересных способов использования Array.reduce() (и один скучный путь)

Сорвётесь Вы на другой проект, а этот отдадут на сопровождение джунам — они ведь мозг могут сломать :)

А вот это уже вопрос привычки и воспитания. Почему декларативные редьюсеры в JS с таким скрипом воспринимаются опытными программистами? Потому что в большом количестве случаев у них классический императивный бекграунд — они начинали на PHP/Python/Ruby или изучали C/Java в институте. Для них естественно мыслить циклами. Я и сам был такой.

Но. Если какое-то время после циклов писать на Promise/reduce/filter/map, то привычки начинают меняться и декларативное программирование становится куда более понятным, естественным. Начинаешь ценить его за лаконичность и идиоматичность. Приведённый пример, кстати, потому так вымученно выглядит на редьюсерах, что он из другого мира — мира синхронных языков типа PHP. JS — асинхронный язык, где всё исполняется в параллели, и асинхронное решение приведённой задачи (Promise.all(imgs.map(asyncLoad));) смотрится кратко и понятно.

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

Пять интересных способов использования Array.reduce() (и один скучный путь)

Ну браузер и не будет выполнить дохренадцать запросов одновременно, он разобьёт на куски. В этом и суть декларативного подхода — ты ставишь задачу, движок/браузер решает как её выполнить.

Async/await в JS, на мой взгляд, выглядят неидиоматично. Потому что JS — асинхронный язык, и эти куски блокирующего кода смотрятся в нём чужеродно.

Пять интересных способов использования Array.reduce() (и один скучный путь)

А зачем такое писать редьюсерами, если есть Promise.all ))

Promise.all(imgs.map(asyncLoad));

Пять интересных способов использования Array.reduce() (и один скучный путь)

Вопрос вкуса и привычки. Reduce, как и любая другая фича, быстро становится понятным — надо просто начать им пользоваться.

Плюс, он идеально подходит для Promise. Там функции, тут функции. В таком окружении циклы выглядят чуждыми элементами.

Ну и, спасибо разработчикам, гигантская разница в скорости между for и reduce всё более и более уменьшается.

[Туториал] Как создать вашу первую инкрементальную IDLE игру на JavaScript

document.getElementById(«spnCoppersValue»)

1. Зачем вы каждый раз дёргаете document.getElementById? Логичнее было бы вынести все DOM-элементы в константы.
2. Зачем вы используете innerHTML если вставляете строки? Для этого есть более легкий путь — textContent.

document.getElementById(«btnUpgSilverMine»).innerHTML = «Улучшить серебряную шахту, »;
document.getElementById(«btnUpgSilverMine»).innerHTML += silversUpgCost().toString();
document.getElementById(«btnUpgSilverMine»).innerHTML += " серебряных монет";

Зачем вы три раза дёргаете элемент? Это дорогое удовольствие. Логичнее сформировать строку и добавить её готовой:

const btnUpgSilverMine = document.getElementById("btnUpgSilverMine");

// code

btnUpgSilverMine.textContent = `Улучшить серебряную шахту, ${silversUpgCost().toString()} серебряных монет`;

let importString = prompt('Введите длинную строку экспорта');
gameTemp = JSON.parse(atob(importString));
for (var propertyName in gameTemp) { game[propertyName] = gameTemp[propertyName]; }

Зачем тут нужен let, если переменная importString не меняется? Откуда var в цикле? Если уж вы перешли на const-let, о var надо забыть.

onclick в атрибутах выглядит архаично. Я бы заменил на addEventListener.

Функциональное программирование с точки зрения EcmaScript. Рекурсия и её виды

Про хвостовую рекурсию забыли рассказать )

Термальное условие

Разве не терминальное? Термальное — это же что-то курортное.

Мой новый стек веб-технологий для 2020 года

Это перевод, боюсь вам никто не ответит )

Мой новый стек веб-технологий для 2020 года

Какой-то человек из 2012 года прощается с jQuery, Grunt, Верданой и привязывает this к каждому коллбеку? Как мило.

Как я 12 лет создавал свой ЯП и компилятор к нему

История дико крутая, спасибо, что рассказали.
Скажите, а в итоге вы устроились программистом?

(обновлено) Rambler Group просит Роспатент запретить МТС и «Яндекс» использовать товарные знаки со словом «Афиша»

Можно ещё потребовать чтобы расклейщики афиш платили Рамблеру.

Dap в действии. Пишем TodoMVC. Часть 1

Вооот, а теперь смотрите:

// Оператор * выполняет повтор для всех элементов массива
// # обозначает "этот элемент"
// Оператор ! просто добавляет текст в элемент
"? $editing:!; ! .title"
...
"? $editing; !! .title@value"
...
".title=#.value; (@method`PATCH .url:dehttp (@Content-type`application/json)@headers (.title):json.encode@body):query"

Очевидно же, что если я хочу писать на dap, JS мне не помощник. Нужно учить особый синтаксис. Так зачем тогда вообще нужен JS, если вся мякотка dap'а — в этих?!!! ` @

Избавьтесь от балласта, запилите свой компилятор. Elm, PureScript, ClojureScript, CoffeeScript все пошли этим путём и выйграли.

Постфутуризм, который мы заслужили

Спасибо )))

Dap в действии. Пишем TodoMVC. Часть 1

"$completed=#.checked; (@method`PATCH .url:dehttp headers (.completed:?)):query"

А, так это CSS. Похоже я сильно отстал от него )))

Постфутуризм, который мы заслужили

Вы написали «философ-марксист». Он не был ни философом, ни марскистом, ни философом-марксистом. Исправьте, пожайлуйста.