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.