In this tutorial, you will learn how to use the filter and find methods in JavaScript.

Table of Contents

You can skip to a specific section of this JavaScript tutorial using the table of contents below:

• What is the JavaScript filter Method?
• What is the JavaScript find Method?
• Final Thoughts

What is the JavaScript filter Method?

The JavaScript filter method allows you to remove elements from a JavaScript array that do not meet a specific criterion.

Like the forEach and map methods that we discussed in our last lesson, the filter method takes in a callback function. In this case, however, the callback function must evaluate to a boolean value - either true or false.

The filter method returns a new array that contains only the elements from the first array whose output of the callback function is true.

Let's consider an example.

Specifically, let's consider an array of integers, appropriately named integers. Here's how we could generate a new array that onlny contains the numbers from the first array that are greater than 5:

const integers = [0, 1, 2, 3, 4, 5, 6, 7, 8];

function greaterThanFive(int){

	if(int > 5){

		return true;

	} else {

		return false;

	}

};

integers.filter(greaterThanFive);

//Returns [6, 7, 8]

This code was intentionally designed to be quite verbose so that you could easily see its function and output. It's important to note that this code could be greatly simplified if you included an arrow function with an implicit return statement.

As an example, this code block has exactly the same functionality:

const integers = [0, 1, 2, 3, 4, 5, 6, 7, 8];

integers.filter(int => int > 5);

//Returns [6, 7, 8]

What is the JavaScript find Method?

The find method is similar to the filter method, except that instead of returning all of the array items that meet the condition, it will only return the first item that meets the condition.

The actual use cases of the find method might be hard to visualize since you already know the exact item you're looking for. The real use of the find method is when you're dealing with an array where each item is an object.

For example, consider the following array of journal entries:

const journal = [

  {events: ["work", "touched tree", "pizza",

            "running", "television"],

   squirrel: false},

  {events: ["work", "ice cream", "cauliflower",

            "lasagna", "touched tree", "brushed teeth"],

   squirrel: false},

  {events: ["weekend", "cycling", "break", "peanuts",

            "beer"],

   squirrel: true},

];

Each item of this array is an object that has two attributes:

• An array of events performed that day
• A boolean value called squirrel that shares whether or not the author has seen a squirrel that day

The find method is an excellent tool to find the first day where the author has seen a squirrel. Here's how you could do this:

journal.find(entry => entry.squirrel === true)

//Returns {events: Array(5), squirrel: true}, which proves to be the last entry of the array upon expansion

Final Thoughts

In this tutorial, you learned how to use the filter and find methods to manipulate data within JavaScript arrays.

Here is a brief summary of what you learned:

• How to use the JavaScript filter method to find all items within an array that meet an outside condition
• How to use the JavaScript find method to find the first item within an array that meets an outside condition
• Why the JavaScript find method is specifically useful for working with arrays of objects