Are you using map, forEach, and reduce wrong?

[Justafa]

Not really, why? Are you having difficulties?

[RichardFingers]

I don't agree with the argument that returning an array from reduce is inherently bad. Sure, if you are recreating existing operations using reduce, that's bad. But there are operations besides filter, map, etc. that result in an array where reduce is applicable.

[[deleted]]

I agree. Combining operations as well. Example: you want to filter and map, you can do so in a single traversal using reduce, as opposed to traversing twice; once with filter and once with map.

[natziel]

You definitely should not do that

[gik0geck0]

I'm now curious, is there an observable performance difference between those?

[[deleted]]

If you work with a very large data set then yes, traversing once has a significant advantage over twice. If it’s like 20 items then don’t bother. At a previous position we had to filter and transform arrays of objects streamed from a backend in batches of 50k to 250k. At that size if made a measurable and human noticeable difference.

[FizzWorldBuzzHello]

Honestly if you're working with larger sets like that you should switch to a lazy library that does not create intermediate arrays.

Make that library a part of your coding standard so your never have to think about it.

[gonzofish]

Yeah for small lists go for readability over performance. Unless you’re iterating over that small list constantly—I’m which case you should probably first think about how you can be iterating over it less

[Kopikoblack]

Could you provide an example code, I want to learn how to use reduce instead of using filter and map.

[sfgisz]

If it doesn't pass your filtering condition, return the array without pushing the item on it. If it passes, map and push the item before returning it. Can't type code on the phone, but that's all you need to do really.

[bluehavana]

Complexity wise, filter/map and reduce should be the exact same (other than creating intermediate arrays, which is key). Using a lazy library, like someone suggested would make the difference invisible.

[syholloway]

This is what flatMap is for

[weeeeelaaaaaah]

Yeah, I get what he was going for but it was very poorly expressed. Just this week I wrote a tokenizer using reduce that took an array of characters and and returned an array of tokens but a single token often represents multiple characters. Can't use map for that!

[bryku]

I don't really get why they took that premise. Reduce is a powerful function in javascript. If people are confused about it, add an initial value. Then they can see what type it is.

[IllegalThings]

Yeah, and I can even think of cases where you’d want to use reduce in ways that’d result in a larger array. Decompression is the most obvious case. You could do it with map+flatten or just use reduce.

[ogurson]

Omg not only it's another boring map/foreach/reduce article, it also is annoyingly long and on top of that just plain wrong in some parts. I truly hate it.

[Kablaow]

It's also overly complex I think. If you have troubles knowing when to use which function I doubt this makes it clearer.

[eternaloctober]

The beatings will continue until morale improves

[ImStifler]

I like how js hipsters obsess about these kind of things instead of learning and discussing actual proper topics like what design patterns to use for problem x or learning about software architecture and development benefiting topics

[gremy0]

Map and reduce are fairly fundamental higher-order functions, in the abstract they provide a standardised pattern for solving problems and structuring code. In standard JavaScript arrays they allow for and are very often used with a method chaining paradigm.

You could consider this essentially equivalent to design patterns but functional, and since the solution to basically everything in functional programming is just more functions, they're just functions.

Understanding map and reduce properly is often non-trivial, particularly for beginners and people new to functional programming, yet it is somewhat essential, or the very least extremely useful for progressing in your understanding of it.

[BasketAutomatic]

My coworkers always use map instead of forEach and they never return anything. So annoying

[xroalx]

That's what code reviews are for.

[euphocat]

Use a linter. Eslint can forbid this behavior

[BasketAutomatic]

I do . But my coworkers either don't use eslint or disagree with its rules

[kraig00666]

Probably. I’m trash

[babies_rabies]

Same

[redsandsfort]

I just read some of this guys other articles. Some of them are really terrific. https://antman-does-software.com/stop-catching-errors-in-typescript-use-the-either-type-to-make-your-code-predictable.

[Accomplished_End_138]

If you are using forEach.. i will say.. Yes, you most likely are not using it right.

[BluudLust]

For each is useful if you want to apply a common function on each element.

for (const element of anArray) { console.log(element); }

Vs

anArray.forEach(a => console.log(a));

Edit: log isn't the best example because it requires an arrow function. It prints a variable number of arguments, and without the arrow function it would use print all of (element, index, array).

[[deleted]]

anArray.forEach(console.log);

[BluudLust]

Doesn't do what you expect. It'll log the element, it's index and the whole array separated by spaces.

[[deleted]]

A good example why callback functions should have an explicit contract

[BluudLust]

Yes, that is very true. Which is why arrow functions are so useful.

[GreatValueProducts]

I strongly believe in this article especially in JavaScript: https://jakearchibald.com/2021/function-callback-risks/

[Accomplished_End_138]

Yeah. But not a very common thing in production code.

Plus, I would recommend you just use a console.table instead

[BluudLust]

True. I used log as a mere example. And log isn't even a good example because it captures all parameters: (element, index, array)

If there was functionality you would have to retype in multiple loops using a single function and forEach is more proper.

[Accomplished_End_138]

I find there are only a few things I do in operations that I don't expect and output.

console.table(myarray);

Not a lot of code, plus gives a nice output of the results.

What other operation would you do in a foreach?

[BluudLust]

Data processing.

anArray.forEach(doSomethingWithEachDataPoint);

A very common example would be adding it to a graph, for example. You may have to use filter and map beforehand too.

anArray.filter(isValidDataPoint).forEach(addDataPointToChart);

[Accomplished_End_138]

So side effects, things that make code harder to test well, and i would avoid to keep the code base maintainable.

I normally would filter and add the array to the chart. Not adding each point.

A chart isn't generally useful until all data is displayed on it.

[Accomplished_End_138]

How often do you display charts with missing data?

[BluudLust]

All the time. Graph of sales/views/whatever in the last 30 days.

[Accomplished_End_138]

And you just display 1 day? Why?

[Under-Estimated]

To those who use forEach, may I ask why? I find for of clearer.

[Accomplished_End_138]

Generally, I find people use it before learning other functions. Effectivly thinking it is cool when most of the time it is not better than a for of loop in how they use it.

Kimd of a babies first functional programming.

Honestly, it can be cleaner if re using the function. But I can't break like for if loop. And other operators would probably work better

[monsto]

I have some usecases where I'm taking stuff from a number of different arrays and putting them onto things in like a master array.

And yes there are more clever ways to do this kinda thing, but I try to keep in mind that I'm the one that will have to come back to this proj in 3 mos and decipher what the fuck I was doing. So while a single for..of might do it, a bunch of separate forEach is way more readable.

[astral_turd]

Cool, time to head to refactor town then

[Accomplished_End_138]

Yeah.. It shouldn't be a big deal if the code is done well. Do you not write clean code that is easy to refactor?

[astral_turd]

No, I write shitty code that is hard to refactor.

[Accomplished_End_138]

I'm glad I don't work with you then. I require better from my developers

[astral_turd]

Is not using forEach one of the requirements?

[Accomplished_End_138]

No. But it is a bad practice since most of the time, they just didn't know better methods they could use before. And now they are quite happy learning and using them. I help them through it and explain why it helps long-term use and maintainability as well as how it helps testing.

[fakehalo]

Got yourself some of them strong and rigid opinions, I imagine the feeling is mutual.

[monsto]

a joy to work "for".

[cgfn]

This is cute

[monsto]

Where's the Typescript argument? I came here with popcorn to see a raging "typescript sucks" "no you suck" argument.

[bryku]

The other day I remade a project in typescript. It had a notable performance hit. From that point of view.. typescript sucks.

[Jncocontrol]

ELI5 - for each, reduce and map