DEV Community

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

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...
Collapse
 
nehal_mahida profile image
Nehal Mahida

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.

Collapse
 
captainyossarian profile image
yossarian • 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']>
);
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
nehal_mahida profile image
Nehal Mahida

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

Collapse
 
miladtehrany profile image
Milad Tehrany

Thanks 🤗

Collapse
 
nehal_mahida profile image
Nehal Mahida

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

Collapse
 
miladtehrany profile image
Milad Tehrany

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

Thread Thread
 
nehal_mahida profile image
Nehal Mahida

Thank you for the kind words. 🙏🏻

It means a lot 🤗

Collapse
 
ysiad profile image
Ysiad

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).

Collapse
 
nehal_mahida profile image
Nehal Mahida

Ohh my bad 😅

I will make it clear in some time.

Thanks for your feeback.🙏🏻

Collapse
 
anstroy profile image
Aus G

Nice thumbnail!! 😂😂

Collapse
 
nehal_mahida profile image
Nehal Mahida

haha, Thanks 😅

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

Collapse
 
anstroy profile image
Aus G

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. 🤘

Thread Thread
 
nehal_mahida profile image
Nehal Mahida

You're welcome 🤗

Collapse
 
maryamos1 profile image
MaryAmos1

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

Collapse
 
sadid369 profile image
Sadid

Thanks

Collapse
 
nehal_mahida profile image
Nehal Mahida

I am glad you like it. 🤗

 
uuykay profile image
William Kuang

Performing map, then filter is 2 iterations of the list. Despite some small readability gains, the performance loss is just too great.

Collapse
 
siddharthshyniben profile image
Siddharth

The cover 🤣

Collapse
 
nehal_mahida profile image
Nehal Mahida

Hope you also enjoyed the article 😅

Collapse
 
amitkum66494760 profile image
Amit Yadav

Thanks

Collapse
 
nehal_mahida profile image
Nehal Mahida

Glad you like it. 🤗

Collapse
 
banyakinfoku profile image
banyakinfoku

what are you doing here

bit.ly/3BEbcZa

Collapse
 
topolanekmartin profile image
Martin Topolanek

Thanks! Finally get it what is reduce function about :)

Collapse
 
nehal_mahida profile image
Nehal Mahida

Purpose served 🤗