Is reduce() bad? - HTTP 203
Why Stack Overflow recommends it
Stack Overflow users link it when answering or commenting on reduce-based code, to argue that reduce is often misused and that a for loop or map/filter is clearer.
Recommended by 4 people across 4 different months, 2020 to 2022.
Why Code Review Stack Exchange recommends it
Code Review Stack Exchange answerers and commenters link it when telling askers to replace a reduce() call that just builds up one accumulator object with a plain loop or Object.entries/fromEntries for readability.
Recommended by 2 people across 2 different months, 2020 to 2022.
What it is
A 23-minute episode of Google's HTTP 203 series in which Jake Archibald and Surma debate JavaScript's Array.reduce(). They discuss whether it is overused, whether it hurts readability, and when a plain loop or other array methods are clearer.
What people said
Recommends Aditya Bhave · 2020-01 · Stack Overflow · on “How I can split my array to multiple arrays based in a value with Javascript?”
@CertainPerformance yes.. I agree that it is opinion based. Check this youtube video from Surma and Jake [this video]
Recommends CertainPerformance · 2020-03 · Stack Overflow · on “Getting error while referencing the type as index”
Using reduce with dynamic keys with Typescript can be ugly and is arguably not appropriate even in Javascript [this video] when creating a single object. Consider creating the object you put the data into outside the loop instead - one whose properties are the names (High, etc) and values are the number arrays. Push to the number array on each iteration (pushing 0 if the property doesn't exist), creating the property with the array first if needed. After looping, turn the object into an array of objects: // compliant with noImplicitAny and strict options type DataItem = { time: string; sum: number; valueObj?: { High: number; Medium: number; Low: number; } }; const sampleData: DataItem[] = [ { val
Recommends Victor · 2020-04 · Stack Overflow · on “Set Random color for each array”
This is off topic, but I when I saw this `Object.keys().reduce()` and it took me an insane amount of thinking to figure out what was going on. This is because it is being used for the wrong thing, I recommend watching this [this video]
Recommends Nick Parsons · 2020-07 · Stack Overflow · on “Find duplicate pairs in an array”
@RameshReddy it might be a little faster, but I haven't tested it. Map works well with reduce as `m.set()` will return the newly modified map which then goes on to be the next value for the accumulator in the next iteration. Using an object also works with reduce, but a for-loop would probably be better for that - but that's debatable (you can watch this [this video] video for a little explanation on why I've decided to go with a map here)
Recommends Falco · 2020-09 · Code Review Stack Exchange · on “Convert minutes portion of time to decimal”
just for your information, I'm using forEach,map quite extensively and code almost all of my list operations in this style and found even a few good uses for reduce. - HTTP 203 on youtube has a good video on reduce which you could watch to get a perspective how other developers decide beteween "reasonable use" and "unreasonable complexity": [this video]
Recommends Jacob · 2022-11 · Code Review Stack Exchange · on “Generic function accepting object and validators for this object's fields”
You really need that `reduce()`? I think a much better implementation would be to use `Object.entries` and `Object.fromEntries`. Check out this video [this video]
Cites foxiris · 2020-02 · Stack Overflow · on “Why this snippet is not pure?”
When I watch Google Chrome Developers, [this video] They said this snippet is not pure. I don't know why. const g = new Map(); for (const [u,v] of edges) { if (!g.has(u)) g.set(u, []); if (!g.has(v)) g.set(v, []); g.get(u).push(v) } And they also mentioned this is pure, const startPoints = new Set(edges.map(([u, v]) => u)); const g = new Map( [...startPoints].map(startPoint => edges.filter(([u, v]) => u == startPoint).map(([u, v]) => v) ) );
Cites CertainPerformance · 2020-02 · Stack Overflow · on “Javascript count same array of object values based on two values”
When reducing into an object, create an object at the grade property first, if it doesn't exist. Then create an object at that grade's Male or Female property if it doesn't exist, and increment it: const studentRecord = [ { name: 'John Doe', gender: 'Male', grade: '85' },{ name: 'Steve Doe', gender: 'Male', grade: '85' },{ name: 'Jane Doe', gender: 'Male', grade: '90' },{ name: 'Mary Jane', gender: 'Female', grade: '85' }, ]; const results = studentRecord.reduce((a, { gender, grade }) => { if (!a[grade]) { a[grade] = {}; } a[grade][gender] = (a[grade][gender] || 0) + 1; return a; }, {}); console.log(results); Or, without reduce [this video] : const studentRecord = [ { name: 'John Doe', gender: 'M
Cites CertainPerformance · 2020-02 · Stack Overflow · on “Grouping an array by key”
The acc is initially an empty object. Inside the reduce callback, the only properties that are ever assigned to it, with the line acc[cur.court] = acc[cur.court] || [] , are arrays, and arrays are truthy. If a property exists at cur.court , acc[cur.court] || [] will evaluate to that property. Otherwise, it'll evaluate to an empty array. Then, it'll assign the result to acc[cur.court] . A less confusing way of writing it, while doing the same thing, would be: if (!acc[cur.court]) { acc[cur.court] = []; } The code looks pretty reasonable already, although I'd prefer using the if statement above, because it looks a bit less confusing. Another option would be to avoid reduce entirely [this video] whe
Cites CertainPerformance · 2020-04 · Code Review Stack Exchange · on “JS Typescript Object filtering”
You can use Object.entries instead, to get an array of entries (an entry is an array of the key and the value), filter it by whether the value is undefined, then use Object.fromEntries to turn it back into an object: const propsSelector = (props: object) => { return Object.fromEntries( Object.entries(props) .filter(([_, val]) => val !== undefined) ); }; const propsSelector = (props) => { return Object.fromEntries( Object.entries(props) .filter(([_, val]) => val !== undefined) ); }; console.log(propsSelector({ foo: 'foo', bar: undefined })); Also: Best to type functions precisely, and avoid using any [LINK] , since that loses type safety - if you use any everywhere, you may as well not be usi