DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

SavagePixie
SavagePixie

Posted on • Updated on

My New Friends filter() and map()

Today I have been learning about arrow functions. I've got to say that at first it's hard to wrap my head around the idea that a function can take another function as one of its parameters. But that'll come with time, I suppose.

Anyhow, a very interesting tool I learned about are the methods filter() and map().

What Do They Do?

The most basic answer is they create a new array based on an old one.

They take a function to check or manipulate the elements of an array and, based on the results of the operation, create a new one with only some of the elements or modified elements. Let's have a look at how each of them works.

filter()

filter() takes a function and uses it to filter the elements in an array. It returns a new array with only the elements that meet the conditions. For example:

const array = [1, 5, 6, 7, 8, 12, 15] //We have an array with several numbers

//But we want an array with only even numbers
const newArr = array.filter((num) => num % 2 === 0) //newArr = [6, 8, 12]

Now we have the new array newArr that only includes the even numbers in array. This method allows us to choose which elements we want from a given array without creating a loop that goes through every one of them.

map()

map() takes a function and calls it on every element of the array. It returns a new array with the altered elements. For example:

const array = [1, 5, 6, 7, 8, 12, 15] //Again, array with several numbers

//For some reason, we would like them to be multiplied by 10
const newArr = array.map((num) => num * 10) //newArr = [10, 50, 60, 70, 80, 120, 150]

But wait, it gets better. What happens if we want to filter through the elements of an array and modify their values? Well, then we can call both methods together like this:

const newArr = array.filter(function).map(function)

Based on our previous examples, let's say that we want to sieve through an array to take only even numbers and then we want to make those ten times bigger. Here's how we can do it:

const array = [1, 5, 6, 7, 8, 12, 15] //Our beloved starting array

const newArr = array.filter((num) => num % 2 === 0).map((num) => num * 10) //newArr = [60, 80, 120]

Conclusion

When we want to create an array based on an old one by taking only some of its elements or calling a function on every element, we can use the methods filter() and map() to make our lives easier.

Top comments (14)

Collapse
adam_cyclones profile image
Adam Crockett • Edited on

.some and .every are amazing too, also .reduce. All the functors rock. Also Array.from

This is a nifty trick too, pass a Boolean construtor to clean an array of all falsely or holes, return only truthy values.

["", 0, "HEY", , null, -Infinity]
    .filter(Boolean) // => ["Hey"]

Lastly .find is just like filter but returns one value rather than an array.

Ps.
I think all the functors are based on reduce.

PSS.
This is functional programming where this expression is preferred over statements like if and for. You will be surprised how much you can get away with.

Collapse
citizen428 profile image
Michael Kohl • Edited on

A functor in FP is the thing that is mapped over (a typeclass with an fmap implementation in Haskell), not the function that gets applied. What you refer to as β€œfunctors” are higher-order functions.

Collapse
adam_cyclones profile image
Adam Crockett

Groovy well that's straightend out. πŸ˜…

Collapse
bananabrann profile image
Lee

Incredible how there's still things to learn. I will definitely start looking at ways to through in this nifty trick, and that .find too! Thanks!

Collapse
adam_cyclones profile image
Adam Crockett

Looks like I should do a post on JavaScript arrays

Collapse
savagepixie profile image
SavagePixie Author

Ooh! New toys! I'll have to check them and see what they do.

Collapse
jeresuikkila profile image
Jere Suikkila

They're amazing. Not a day goes by without me writing one of these! I love how easy they are to write and how understandable they are to read afterwards to know what a piece of code does.

Collapse
jacoby profile image
Dave Jacoby

I was about to say that, if you like map and filter, you'll love reduce, but it's been said...

Collapse
savagepixie profile image
SavagePixie Author

I've looked at it a bit, but I think it'll be tomorrow's trouble, hehe

Collapse
jacoby profile image
Dave Jacoby

It'll be there when you get to it.

In my language of choice, Perl, map exists, filter is grep, and reduce comes from a non-standard library. It still fills me with joy.

Collapse
praneetnadkar profile image
Praneet Nadkar

The explanation was neat!

Collapse
webdeasy profile image
webdeasy.de

Good explanation and examples! 😊

Collapse
yashwanthambati profile image
Yashwanth

These are my enemies from today onwards.. haha

Collapse
rahul05ranjan profile image
Rahul Kumar

All these introduced in ES6. There are more good fun in ES6 and so on.

DEV runs on 100% open source code known as Forem.

Β 
Contribute to the codebase or host your own.
Β 
Check these out! πŸ‘‡