In today's episode, we'll learn how to use the filter function and how it can be chained with other array functions such as map. If you've not seen the previous episode, you can find it here. The Map Function.
The filter function is part of the array object. It is used for filtering elements out of an array. Like map, filter is a pure function. Below is an example of how it is used.
How it's used
An example of how filter can be used to remove elements from an array.
const array = [1, 2, 3, 4, 5, 6, 7, 8];
const newArray = array.map((value) => value % 2 == 0); // 2, 4, 6, 8
The Filter function - Functional Programming in JavaScript
Video Transcript
Hello and welcome to the second episode in this series of functional programming in JavaScript. Today we're going to take a look at the filter function.
Just like the map function we looked at in the last episode, the filter function is part of the array object and it's used for filtering elements out of an array. Now let's take a look at some code.
In this example, we're going to be using the same data we did in the previous example. We have an array of users I'm going to use filter to remove any user that's under the age of 23. Before we look at filter though let's look at how we can achieve this using a for-loop.
We start by creating an array to hold the older users in. We then use a for-loop to loop over each item in the original users array and if the user's age is greater than 22, we push that user into this new array. There's nothing very exciting here but it gets the job done.
Now let's look at how we could do this using the filter method. Let's start by removing the for-loop. Next, we'll call filter on the original users array. Filter takes a few arguments but the first one and the most important one is a callback function.
The way filter works is that it loops over each item in the array and passes each element in that array to this callback function. So let's do that now. In this case, we'll call it user, and whatever this callback function returns decides whether or not that element is pushed into the new array. If the callback function returns true the element is pushed in. If it doesn't it isn't pushed in. So, in this case, we want to keep every user if the age is greater than 22. So let's do that.
If we run this code, we should see only two elements remain. Perfect! Because functions like filter and map just return another array it allows us to chain these methods together. Let's look at an example of how this works.
Here we're calling filter on the users array but let's take it one step further and we'll call map as well. So here we filter out any user whose age isn't greater than twenty-two and then we're replacing that user object with the strings stating that the user is older than twenty-two. Let's run this code and see what happens. Yep, that's exactly what we expect. Hopefully, this is a good example for you as to how these functional programming methods can help you write really clean succinct code.
So that wraps up this episode of functional programming in JavaScript. Today, we've had a look at the filter method and how we can use it to remove elements from an array. We also had a look at how we can chain these methods along with methods like map to create clean succinct code. In the next episode, we're gonna take a look at the reduce method. Bye-bye!