JavaScript’s Filter Function Explained By Applying To College
Tags: beginners, javascript, tutorial
Published: 2018-06-03 17:01:18

---
title: JavaScript’s Filter Function Explained By Applying To College
published: true
description: This visual explanation will help you understand how filter functions in JavaScript are similar to the college application process.
tags: #beginners, #javascript, #tutorial
cover_image: https://i0.wp.com/blog.codeanalogies.com/wp-content/uploads/2018/05/backgoundFilter.jpg?resize=900%2C600&ssl=1
---

**If you are familiar with the college application process, then you can understand JavaScript’s filter functions.**

Compared to the map() and reduce() methods in JavaScript, the filter( )method has probably the most straightforward name.

_You input an array, and you filter out the elements that fulfill a specific condition into a new array._

This seems simple, but I always seemed to find myself reverting to for() loops. So, I decided to find a better way to understand how filter() functions worked.

I realized that filter functions are kind of like a college admissions officer. They use a set of parameters to decide which students should be admitted to their particular college. Yes, we all wish that colleges were a little more flexible and judged our accomplishments holistically, but in reality, most still have hard numbers around SAT, ACT and GPA scores that determine who will be considered.

Let’s get into it!

![](https://i0.wp.com/blog.codeanalogies.com/wp-content/uploads/2018/05/filterOverviewDiagram.png)

### Using A For Loop Instead of Filter Function

Okay, let’s say that we have an array of 4 students with names and GPAs. This particular college only wants to admit students with a 3.2 GPA or higher. Here is how you might do that.

```javascript 
let students = [
  { 
    name: "david", 
    GPA: 3.3 
  }, 
  { 
    name: "sheila", 
    GPA: 3.1 
  }, 
  { 
    name: "Alonzo", 
    GPA: 3.65 
  }, 
  { 
    name: "Mary", 
    GPA: 3.8 
  }
] 

let admitted =[]; 

for (let i=0; i < students.length; i++){ 
  if(students[i].gpa > 3.2) 
    admitted.push(students[i]); 
} 

/*admitted = [
  { 
    name: "david", 
    GPA: 3.3 
  }, 
  { 
    name: "Alonzo", 
    GPA: 3.65 
  }, 
  { 
    name: "Mary", 
    GPA: 3.8 
  }
];*/
```

Wow! That was way more complicated than it needed to be. If someone was reading over your code, they would need to track multiple arrays just to learn that you were simply filtering one array into another. And, you need to carefully track _i_ as you go in order to avoid any bugs. Let’s learn how to use the filter method to accomplish the same thing.

### Using the Filter() Method

Let’s learn how to accomplish the same goal with the filter() method.

1. Filter is an array method, so we will start with the array of students.
2. It uses a callback function that runs on each element in the array.
3. It uses a return statement to show which elements will actually end up in the final array, in this case, the admitted students.
 
```javascript 
let students = [
  { 
    name: "david", 
    GPA: 3.3 
  }, 
  { 
    name: "sheila", 
    GPA: 3.1 
  }, 
  { 
    name: "Alonzo", 
    GPA: 3.65 
  }, 
  { 
    name: "Mary", 
    GPA: 3.8 
  }
] 

let admitted = students.filter(function(student){
   return student.gpa > 3.2;
})

/*admitted = [
  { 
    name: "david", 
    GPA: 3.3 
  }, 
  { 
    name: "Alonzo", 
    GPA: 3.65 
  }, 
  { 
    name: "Mary", 
    GPA: 3.8 
  }
];*/
```

The inputs and outputs are the same, so here’s what we did differently:

1. We didn’t need to declare the admitted array and then fill it later. We declared it and then filled it with elements in the same code block
2. We actually used a condition within the return statement! That means that we only return elements that pass a certain condition.
3. We can now use _student_ for each element in the array, rather than students[i] like we did in the _for_ loop.

![filterDiagramV1.jpg](https://cdn.filestackcontent.com/IDqqk2Y7RvC5mkYGwom6)

![filterDiagramV2.jpg](https://cdn.filestackcontent.com/Bb3Z8tQiRpal46iYJJqT)


You may notice that one thing is counterintuitive- getting admitted to college is the last step, but in our code, the variable _admitted_ is the first part of the statement! You might usually expect to find the final array as the last statement within the function. Instead, we use return to indicate which elements will end up in _admitted_.

![filterCodeBlock1.jpg](https://cdn.filestackcontent.com/CJFC1S8VShCCAjcNCLqK)
 
### Example 2- Using Two Conditions Within Filter

So far, we have just used one condition in our filter methods. But that does not represent the college admission process at all! Usually, admissions officers are looking at 10+ factors.

Let’s look at two factors- GPA and SAT scores. Students must have a GPA over 3.2 and an SAT score over 1900. Here is what the same function would look like.

```javascript
let students = [
  {
    name: "david",
    GPA: 3.3,
    SAT: 2000
  },
  {
    name: "sheila",
    GPA: 3.1,
    SAT: 1600
  },
  {
    name: "Alonzo",
    GPA: 3.65,
    SAT: 1700
  },
  {
    name: "Mary",
    GPA: 3.8,
    SAT: 2100
  }
]
 
let admitted = students.filter(function(student){
   return student.gpa > 3.2 && student.SAT > 1900;
})
 
/*admitted = [
  {
    name: "david",
    GPA: 3.3,
    SAT: 2000
  },
  {
    name: "Mary",
    GPA: 3.8,
    SAT: 2100
  }
];*/
```

Looks pretty similar, right? Now we just have two conditions within the _return_ statement. But let’s break that code down a bit further.

```javascript
let admitted = students.filter(function(student){
   let goodStudent = student.gpa > 3.2 && student.SAT > 1900
   return goodStudent;
})
```

Aha! So here is another important difference when compared to _for_ loops. If you check out the goodStudent variable, you can see that it will only evaluate to _true_ or _false_. Then, that boolean is fed into the return statement.

So, that _true_ or false really just decides if each member of the original array will be included or not in the resulting array, _admitted_.

![twopartfilter1.jpg](https://cdn.filestackcontent.com/ly7otC19QNasdN29wBQF)

![twopartfilter2.jpg](https://cdn.filestackcontent.com/zYB4yi8ZSmKSu1loFM92)

 
### Get More Visual Tutorials

Did you enjoy this tutorial? You will probably also enjoy my other visual explanations of web development topics on the [CodeAnalogies blog] (https://codeanalogies.com).