Introduction

The JavaScript filter method is one of the higher-order functions that allows us to filter content based on a condition that has been set. Today, we will take a look at how to implement it in our code as well as look at some "Real-World examples" of how it could be used as means to search through an array of content.

Getting Started

The .filter() method is a higher-order function that can be called on any array or object -- see below:

js
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.filter();

It takes in a function as its argument and also has a return value which is an array that contains the elements that pass the condition implemented. The filter method essentially loops through every item in the array that it is called on and checks the current iteration on a parameter that is set. Like state previously, if the condition is met, then the added to the array that is returned by the function. The example below shows us using the filter method to remove the number 4 from the array called "arr".

js
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.filter((number) => number != 4);

The return value here will be [1,2,3,5,6,7,8,9,10]

Example 2

For another example, more interesting -- Given an array of objects, where each object represents a student that has taken a test, return the names of the students that scored at least an 80% on the test. We can use the array filter method to do this. The object contains two keys -- the student's name and their grade {Name:"", Grade:0}.

js
const students = [
  {
    Name: "John",
    Grade: 90,
  },
  {
    Name: "Sarah",
    Grade: 95,
  },
  {
    Name: "Jane",
    Grade: 80,
  },
  {
    Name: "Julie",
    Grade: 79,
  },
];

Since we are given an array of objects, we can use the filter method to loop through the entire array and check if the current student's grade is greater or equal to 80%. It looks something like this:

js
const students = [
  {
    Name: "John",
    Grade: 90,
  },
  {
    Name: "Sarah",
    Grade: 95,
  },
  {
    Name: "Jane",
    Grade: 80,
  },
  {
    Name: "Julie",
    Grade: 79,
  },
];

students.filter((student) => {
  if (student.Grade >= 80) {
    return student.Name;
  }
});

A shorthand for this would be that we can store the return value in a variable so that we can use it later. The following look something like this:

js
const students = [
  {
    Name: "John",
    Grade: 90,
  },
  {
    Name: "Sarah",
    Grade: 95,
  },
  {
    Name: "Jane",
    Grade: 80,
  },
  {
    Name: "Julie",
    Grade: 79,
  },
];

const stuAbove80 = students.filter((student) => student.Grade >= 80);

The Fun Stuff -- Add a search field to your web application

A common feature in most applications that have large amounts of scrollable content is a search field -- users enjoy the experience of being able to quickly search for the content they want to find since it saves them time in the end. This feature can be accomplished in many ways but today we will be using the javascript filter method to add a search feature to the student's array we have been working with, this time we will be searching for a specific student by name. The advantage of using the filter method is that we can filter out the content as the user types -- this is best described when you are searching for something to watch on Netflix.

You can do this with vanilla JavaScript, however, today we will be using a library such as react to create our UI.

Let's pretend that we made an API request and this is the data you got back:

js
const students = [
  {
    Name: "John",
    Grade: 90,
  },
  {
    Name: "Sarah",
    Grade: 95,
  },
  {
    Name: "Jane",
    Grade: 80,
  },
  {
    Name: "Julie",
    Grade: 79,
  },
];

We are storing it in a variable called students so we can use it later on. Here is just some boiler code to get all the boring stuff out of the way. This just has an input field that is connected to a state variable and a component that is showing all the student names with their associated grades.

jsx
import react from "react";

const App = () => {
  import { useState } from "react";
  const students = [
    {
      Name: "John",
      Grade: 90,
    },
    {
      Name: "Sarah",
      Grade: 95,
    },
    {
      Name: "Jane",
      Grade: 80,
    },
    {
      Name: "Julie",
      Grade: 79,
    },
  ];

  const [searchTerm, setSearchTerm] = useState("");
  return (
    <div>
      <input
        type="text"
        onChange={(e) => setSearchTerm(e.target.value)}
        defaultValue={searchTerm}
      />

      {students.map((student) => (
        <p>
          students Name:{student.Name} and their grade: {student.Grade}
        </p>
      ))}
    </div>
  );
  export default App;
};

To add the search feature, we can filter through the student's array and return a list of student objects with names that match the search term.

jsx
students.filter((student) => {
  if (searchTerm == "") {
    return student;
  } else if (student.Name.toLower().includes(searchTerm.toLower())) {
    return student;
  }
  return null;
});

When the search bar is empty, we want to display every object in the data holder variable so we can just return every member without filtering. Now it may seem counter-intuitive but to computers "A" is not the same as "a". To that same extent "John" is not the same a "john". So that we don't run into this issue we are going to convert the search term and the Name to lowercase and then check if the search term includes the Name. If it does then the current student object is going to get added to the list.

We can then map through this array that is returned from the filter to display the student's name and grade using the component we created. The final code should look something like below:

jsx
import react from "react";

const App = () => {
  import { useState } from "react";
  const students = [
    {
      Name: "John",
      Grade: 90,
    },
    {
      Name: "Sarah",
      Grade: 95,
    },
    {
      Name: "Jane",
      Grade: 80,
    },
    {
      Name: "Julie",
      Grade: 79,
    },
  ];

  const [searchTerm, setSearchTerm] = useState("");
  return (
    <div>
      <input
        type="text"
        onChange={(e) => setSearchTerm(e.target.value)}
        defaultValue={searchTerm}
      />

      {students
        .filter((student) => {
          if (searchTerm == "") {
            return student;
          } else if (student.Name.toLower().includes(searchTerm.toLower())) {
            return student;
          }
          return null;
        })
        .map((student) => (
          <p>
            students Name:{student.Name} and their grade: {student.Grade}
          </p>
        ))}
    </div>
  );
  export default App;
};

Now that this is complete, we have a way to search for a student by looking up a Name using a javascript function that we created!

Question for you

Now knowing this, here's a question for you -- how else can we implement the filter method?