My New Friends filter() and map()

#javascript #beginners #webdev #todayilearned

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 (13)

Adam Crockett 🌀 • Jul 24 '19 • Edited

.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 • Jul 24 '19

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

Lee • Jul 25 '19

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!

Adam Crockett 🌀 • Jul 25 '19

Looks like I should do a post on JavaScript arrays

Jere Suikkila • Jul 24 '19

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.