How to Use the Filter() Method
Tags: javascript, beginners, tutorial
Published: 2022-09-07 06:41:57

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ups9uvgpl028v0zenh0g.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3vhmygj5gbskroae139.png)

- 
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x131xalyehx3ogtqchfg.png)


- 
 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xs212lj9o4sqa1110urx.png)

Now we run the program:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bloffvr9kd43snx50adb.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xga25hne40ba0pb84y9u.png)

- 
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vct0777ikraa9lj2dhve.png)

- 
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1eqxs6ehxq3jzzteojp.png)

Now we run the program:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/og9p8uy92c295aqm7qih.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30qy6klnac40dszhy2iy.png)

- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vx8ci41ehpy90oortj4k.png)

- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0acm344ljhsbyb65ftg1.png)


Now we run it 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70hr1wz73izzt6aeqiib.png)

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.