## DEV Community

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.

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

SavagePixie

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

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!

Looks like I should do a post on JavaScript arrays

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.

Dave Jacoby

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

SavagePixie

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

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.

The explanation was neat!

webdeasy.de

Good explanation and examples! ðŸ˜Š