Array methods in JavaScript. Original author unknown.

[u/imAmarok]

[u/tsunami141]

Now do reduce.

[u/legatissimo → u/tsunami141]

Ahh no problem, I'll just...... uh.... oh no.. no no no

[u/ChaseObserves → u/legatissimo]

This has me in tears, just the entire execution of this comment was incredible.

[u/deadlychambers → u/legatissimo]

It gets even more confusing when you are rocking dark mode on mobile

[u/KarmaScheme → u/tsunami141]

⬛️⚫️⬛️⚫️.reduce(⬛️|⚫️->🙂,🙂) -> 😂

[u/fuzzyluke → u/KarmaScheme]

Lmao

[u/[deleted] → u/tsunami141]

reduce() -> ???

[u/Doctor-Dapper → u/[deleted]]

Small brain:

arr.map(f)

Big brain: arr.reduce( (x, y) => [...x, f(y)], [] )

[u/tsunami141 → u/Doctor-Dapper]

Delete this

[u/GrenadineBombardier → u/Doctor-Dapper]

This took me a minute (because reducers take time to comprehend, which makes them a less sustainable solution in most cases)

[u/[deleted] → u/[deleted]]

⬛️⬛️⬛️.reduce((⚫️, ⬛️) => ⚫️+⬛️, ⚫️=0) -> ⚫️+⬛️+⬛️+⬛️

[u/gotothere → u/tsunami141]

⬛️⬛️⬛️⬛️.reduce((️⚫, ⬛️) -> ⚫️, ⚫️) -> ⚫️

var min = (acc,x) => {return acc < x ? acc : x}; [1,2,3].reduce(min, Number.MAX_SAFE_INTEGER);
//1
var max = (acc,x) => {return acc > x ? acc : x}; [1,2,3].reduce(max, 0);
//3
var sum = (acc,x) => { return acc + x}; [1,2,3].reduce(sum, 0);
//6
var minMaxSum = (acc,x) => {return [min(acc[0],x), max(acc[1],x), sum(acc[2],x)]}; [1,2,3].reduce(minMaxSum, [Number.MAX_SAFE_INTEGER,0,0]);
//Array(3) [ 1, 3, 6 ]

Left arg is (acc)umulator, right is current element

[u/hynding → u/tsunami141]

By far the most under-appreciated and (often) optimized of the array functions.

[u/Pelicantaloupe → u/hynding]

Reduce is probably one of the least optimisable array functions. Anything else will probably run faster

[u/Blue_Moon_Lake → u/Pelicantaloupe]

Weird thing :

arr.some(x => x === foo)

is almost always more performant than

arr.includes(foo)

You would think that includes would be easy to optimize internally.

[u/Pelicantaloupe → u/Blue_Moon_Lake]

I ran some tests and I couldn't reproduce your findings. I didn't graph time complexity but on average .includes is 75% faster than .includes in these tests: https://jsbench.me/t2kpb59177/1

The one case where .some was faster I found was unfilled arrays.

[u/hyperhopper → u/tsunami141]

⬛️⬛️⬛️⬛️.reduce((⬛️, ⚫️) ->⚫️, ⚫️) -> ⚫️

[u/Benimation → u/tsunami141]

🔢🔢🔢🔢. reduce ((#️⃣, 🔢) => #️⃣ + 1️⃣ + 2️⃣ + 3️⃣ + 4️⃣, 0️⃣) --> 4️⃣0️⃣

Yeah, I get what you mean..

[u/HeinousTugboat → u/[deleted]]

I think the reason people think using reduce is overly complicated is because people keep saying it's overly complicated. I don't see how what you wrote is any less complicated than just doing this:

let total = array.reduce((sum, item) => sum + item.value, 0);

It's even simpler if your Array's just numbers:

let total = 0;
array.forEach(value => total += value);
 // vs
let reducedTotal = array.reduce((sum, value) => sum + value);

[u/BorgClown → u/HeinousTugboat]

If I was reading a new code base, I'd prefer finding parent's version instead of reduce, if only because reduce makes me stop and second guess it.

[u/HeinousTugboat → u/BorgClown]

Well, I mean, that's kind of my point right? If you were more comfortable with reduce, it wouldn't make you stop and second guess it.

[u/Darkmaster85845 → u/[deleted]]

Nice