All code using array.reduce should be rewritten without array.reduce so it's readable by humans *mutes thread*
Ok ok, fair enough, there are cases where array.reduce is the best thing to use.
Specifically, cases where you want to look really smart and don't care about readability.
Specifically, cases where you want to look really smart and don't care about readability.
I mean, wtf: 
wait
(although, in my defence developers.google.com/web/fundamenta…)
Whoa, this is worse than that time I pissed off Trump supporters
Here's a great quote from the inventor of Python (h/t @tigt_):
"the applicability of reduce() is pretty much limited to associative operators, and in all other cases it's better to write out the accumulation loop explicitly"
artima.com/weblogs/viewpo…
"the applicability of reduce() is pretty much limited to associative operators, and in all other cases it's better to write out the accumulation loop explicitly"
artima.com/weblogs/viewpo…
BUT, on the other hand, Jimmy-randbro tells me I'm too dumb to appreciate the majesty of reduce, so WHO KNOWS.
Ok, I've been asking folks for good examples of reduce, and they fall into a few categories. Here's what I've seen:
SUMS! Yes, this is the textbook example, and one of the few ok uses of reduce. The reduce example is probably better here.
SUMS! Yes, this is the textbook example, and one of the few ok uses of reduce. The reduce example is probably better here.
![const arr = [1, 2, 3];<br />
<br />
// Reduce:<br />
arr.reduce((total, item) => total + item);<br />
<br />
// Not reduce:<br />
let total = 0;<br />
for (const item of arr) total += item;](https://pbs.twimg.com/media/ENbkyofXkAA391I.jpg)
Folks suggested other forms of 'gathering', such as concatenating the keys of an object.
In this case I think the map + join is more expressive. However, I'd go for the loop if the two iterations caused performance issues (which is unlikely).![const arr = [<br />
{foo: 'hello'},<br />
{foo: 'world'},<br />
];<br />
// Should become]()
// Reduce:
arr.reduce((str, item) => str += item, '');
// Not reduce:
arr.map(item => item.foo).join('');
// Loop:
let str = '';
for (const item of arr) str += item.foo;" src="/images/1px.png" data-src="https://pbs.twimg.com/media/ENbkzIJXUAEsaxa.jpg">
In this case I think the map + join is more expressive. However, I'd go for the loop if the two iterations caused performance issues (which is unlikely).
![const arr = [<br />
{foo: 'hello'},<br />
{foo: 'world'},<br />
];<br />
// Should become](https://pbs.twimg.com/media/ENbkzIJXUAEsaxa.jpg)
// Reduce:
arr.reduce((str, item) => str += item, '');
// Not reduce:
arr.map(item => item.foo).join('');
// Loop:
let str = '';
for (const item of arr) str += item.foo;" src="/images/1px.png" data-src="https://pbs.twimg.com/media/ENbkzIJXUAEsaxa.jpg">
Another interesting example was "getting the size of the largest string". Again, I find the map + max version better describes the intent.
"Is the length of the first item bigger than the biggest item so far? If so, remember it"
vs
"Get all the lengths, give me the biggest"
"Is the length of the first item bigger than the biggest item so far? If so, remember it"
vs
"Get all the lengths, give me the biggest"
![const arr = ['one', 'two', 'three'];<br />
// Should be 5<br />
<br />
// Reduce:<br />
arr.reduce((largest, item) => Math.max(largest, item.length), 0);<br />
<br />
// Not reduce:<br />
Math.max(...arr.map(item => item.length));](https://pbs.twimg.com/media/ENbkzztWsAAfbs8.jpg)
Most suggestions were object transformations. I strongly believe these should not use reduce.
Most were creating the object once, then passing the same object back through reduce. This is using reduce for decoration only. The only part of reduce it's using is the looping.
Most were creating the object once, then passing the same object back through reduce. This is using reduce for decoration only. The only part of reduce it's using is the looping.
![// Array to object keys<br />
const arr = ['hello', 'world'];<br />
// Should become {hello: null, world: null}<br />
<br />
// Reduce:<br />
const obj = arr.reduce((obj, item) => {<br />
obj[item] = null;<br />
return obj;<br />
}, {});<br />
<br />
// Map + fromEntries:<br />
const obj = Object.fromEntries(<br />
arr.map(item => [item, null]),<br />
);<br />
<br />
// Loop:<br />
const obj = {};<br />
for (const item of arr) obj[item] = null;](https://pbs.twimg.com/media/ENbk0UPXUAEciuB.jpg)
I saw ones similar to the above, but the author had realised the reduce was being used for decoration. So to avoid that, they create a new object on each iteration.
This is not only obfuscated, it's O(n2) slow.
It might make you look smart to other developers though! 😀
This is not only obfuscated, it's O(n2) slow.
It might make you look smart to other developers though! 😀
![const obj = arr.reduce((obj, item) => ({<br />
...obj,<br />
[item]: null,<br />
}), {});](https://pbs.twimg.com/media/ENbk04vWsAYDNv4.jpg)
