DEV Community

filter, map and reduce in JS. When and Where to use??

Nehal Mahida on October 27, 2021

Introduction In this article, We will take a look at the most used javascript methods for array transformations: filter(), map() and red...

Read full post

Nehal Mahida • Oct 27 '21

Definitely a good point 👏🏻

Performance vs readability is a never-ending debate.

I intend how we can avoid two methods by just using reduce and explaining to the people how to use reduce syntactically!!

And yes, for loop is there to achieve all of these things.

yossarian • Oct 28 '21 • Edited

You will get noticeable performance hit if your array has more than 1K elements. In worst case scenario you will iterate 2 times over 1K elements. Btw, what makes you think that reducer is not readable?

type User = {
  name: string;
  city: string;
  birthYear: number;
}
declare const users: User[]

const currentYear = new Date().getFullYear();

const olderThan25 = (user: User) =>
  user.birthYear && (currentYear - user.birthYear) > 25 ? [user] : []

const getName = ({ name }: User) => name

const userNames = users.reduce((acc, user) =>
  olderThan25(user)
    ? acc.concat(getName(user))
    : acc,
  [] as Array<User['name']>
);

You can chain map and filter in functional languages, like for example F# because there is no intermediate value.

Nehal Mahida • Oct 28 '21

That's a good point with a great code presentation. 👍🏻

Milad Tehrany • Oct 28 '21

Thanks 🤗

Nehal Mahida • Oct 28 '21

Glad you like it. Check out other articles from my profile you definitely like it. 🤗

Milad Tehrany • Oct 28 '21

Yes, of course, thank you 🤗
And I'm proud to follow you.

Nehal Mahida • Oct 28 '21

Thank you for the kind words. 🙏🏻

It means a lot 🤗

Ysiad • Oct 28 '21

Hi, thank you for this article ! I'm still learning and it helps to review basics. Just a little comment about the variables you use to illustrate the reduce fonction : in the code it's filterUser and in the article filterUsers, and the same goes with "user" and "users", I think it can be important for the understanding that the names remain consistent between the explanation and the code (well for me it's confusing when there's an extra or a missing "s" at the end sorry ahahah).

Nehal Mahida • Oct 28 '21

Ohh my bad 😅

I will make it clear in some time.

Thanks for your feeback.🙏🏻

Aus G • Oct 28 '21

Nice thumbnail!! 😂😂

Nehal Mahida • Oct 28 '21

haha, Thanks 😅

I would also like to know your feedback about this article.

Aus G • Oct 28 '21

I liked the .reduce() method explanation, personally I have only used it a few times, but still is hard for me to understand what it does. You explained it pretty well, thanks for sharing. 🤘

Nehal Mahida • Oct 28 '21

You're welcome 🤗

MaryAmos1 • Oct 30 '21

The map(), reduce() and filter() are array functions that transform the array according to the applied function and return the updated array obsession spell with cotton balls