DEV Community

Joshua Campos
Joshua Campos

Posted on

How to Use the Filter() Method

The Filter() method finds and returns a list of elements that meet a certain condition. It takes in a callback function.

Here we have an array of group of peoples objects, which store their first name, last name, favorite color, and favorite food.

Image description

Let's say we want to return only the first and last names of the people that loves pizza with a string that says for example: 'Carlos, Herrera likes pizza!. For this we could use the filter() method which would go through each object of the array and return the objects with people whose favorite food is pizza. Like this:

  • First, we can create a function called getPizzaLovers() that will take one arguments called person, since we are going through each object in the array. This function will serve as our callback function. Here we will use an if statement to check and return if the person's favorite food is ‘Pizza’.

Image description

  • Second, we create a const variable named filtered were we are going to call the filter() method and store the filtered objects. Here we invoke the filter() method to group and we pass our callback function getPizzaLovers().

Image description

  • Lastly, we console log the result. Since the filter() function is going to return us an array of objects, one way we could print out our string is by using a method called ForEach(). Here we invoke the forEach on the filtered objects and for each person in the array of objects it will console.log our string ’FIRSTNAME LASTNAME loves FAVORITEFOOD!’. Like this:

Image description

Now we run the program:

Image description

As we can see, we got 3 names for which their favorite food is Pizza, while the other names were filtered out.

Note: There are other ways to print out our string using for loops, but the forEach() method is a more easy way to iterate through each element of an array.


Another Example:

Let’s say we want to only return a string on only the people whose last name starts with ‘M’ and likes 'Sushi'.

  • First, we can create a function called getNames() that will take one argument called person, since we are going through each object in the array.This function will serve as our callback function. Only that for this one we are going to use an if statement to check and return if the last name of the person starts with ‘M’ and if their favorite food is 'Sushi'.

Image description

  • Second, we create a const variable named filtered were we are going to call the filter() method and store the filtered objects. Here we invoke the filter() function to group and we pass our callback function getNames().

Image description

  • Lastly, we console log the result. Since the filter() method is going to return us an array of objects, one way we could print out our string is by using a method called ForEach(). Here we invoke the forEach on the filtered objects and for each person in the array of objects it will console.log our string ’FIRSTNAME LASTNAME loves FAVORITEFOOD!’. Like this:

Image description

Now we run the program:

Image description

As we can see we got two names, even though there is another person that has a last name that starts with 'M'. The reason it did not return it, was because that person's favorite food was not 'Sushi' therefore that name got filtered out.


Let's say we want to return an array of objects with only the people that like the color 'Pink'.

  • First, we can create a function called getPinkLover() that will take one argument called person, since we are going through each object in the array.This function will serve as our callback function. Only that for this one we are going to use an if statement to check and return the person's object if the favorite color is 'Pink'.

Image description

  • Second, we create a const variable named filtered were we are going to call the filter() method and store the filtered objects. Here we invoke the filter() function to group and we pass our callback function getPinkLover().

Image description

  • Lastly,Since the filter() method is going to return us an array of objects, which is what we want. The only thing we need to do is to console log it. Like this:

Image description

Now we run it

Image description

Here we can see that we got one person's object that likes the color pink. We can also see their first name, last name, favorite color, and favorite food.

Array methods like the filter() method is one way to write more easy and efficient code. Which means we don't need to use for...of or for...in loop.

Top comments (0)