The filter() method
Tags: beginners, javascript, methods, filter
Published: 2023-05-08 20:23:26

## The first of many
Hello! 
I'm currently a student from FlatIron School learning full stack development. This will be my very first blog post as a programmer and there will be many more! The topic I want to post about will be on the `.filter` method but first let's start with a real world problem:
 

## Problem
Let’s say that you work as an event organizer for a basketball tournament. You’ve been tasked to categorize 100 participants in age, height, and weight to evenly distribute the participants into teams. What’s the best way to do it? We can use the array `.filter()` method.

![Basketball dribble](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wix5mwf49ug612s49bmr.jpeg)

## Array.prototype.filter()
In JavaScript the `.filter()` method is a high-order function that can be used to filter out elements from an array. It does this by creating a new array with only elements that satisfies a given condition.

_Syntax:_

```javascript
array.filter(callback(element[, index[, array]])[, thisArg])
```

The `.filter() `method takes in a total of five parameters three of which are optional:
- callback function(required)
- element(required)
- index(optional)
- array(optional)
- thisValue(optional)


![Drip coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kpgp0siu2r5e1dh3le45.jpeg)

_Let's look at some examples of the `.filter()` method:_


```javascript
const participants = [
  {
    name: "Joe",
    age: 25,
    height: 71, // 5'11"
    weight: 160
  },
  {
    name: "Chris",
    age: 30,
    height: 74, //6'2"
    weight: 180
  },
  {
    name: "Mike",
    age: 21,
    height: 68, //5'8"
    weight: 140
  },
  {
    name: "Thomas",
    age: 45,
    height: 77, //6'5"
    weight: 200
  },
  {
    name: "Loid",
    age: 27,
    height: 67, //5'7"
    weight: 170
  }
]
  
```
In the code above we have an array of objects called participants with `name`, `age`, `height`, and `weight` keys. Let’s say we wanted to separate the participants by their `height`. We want to get the name of participants whose heights are above 6 foot and those who are below 6 foot. To do that we can use `.filter()` like this:
```javascript
// Filter objects with height 72 inches and over (6'0" and over)
const sixAndOver = participants.filter((person) =>{
    person.height >= 72
});
const sixAndOverNames = sixAndOver.map((person) =>{ 
    person.name
});

// Filter objects with height below 72 inches (below 6'0")
const below6ft = participants.filter((person) =>{
person.height < 72
});
const below6ftNames = below6ft.map((person) => person.name);
```


## Participants 6'0" and above



```javascript
const sixAndOver = participants.filter((person) =>{
person.height >= 72
});
```
This line of code takes the object array called participants then uses the `.filter()` method to create a new array with only the objects that satisfy the condition inside it. Inside the `.filter()` we get one of the required parameters, a callback function. The callback function takes in an argument of objects called `person`. It then returns all of the objects `person` that have a `height` value of 72 inches and over (6’0” and over) thus filtering the `participants` object array. Now to get the `name` of the `participants` we will use the `.map()` method.
```javascript
const sixAndOverNames = sixAndOver.map((person) =>{ 
    person.name
});

```
With this line of code, we assign a variable called `sixAndOverNames` that uses the `map()` method to return a new array with the names of the objects that are in the `sixAndOver` array. This gets us the names of the participants that are 72 inches and over:
```javascript
// LOG: [ 'Chris', 'Thomas' ]
```


## Participants below 6'0"



We do something similar as before but instead we get the names of `participants` that are below 72 inches. First, just like before, we get a new array of objects that have a `height` value below 72 inches using this line of code:

```javascript
const belowSix = participants.filter((person) =>{
person.height < 72
});
```
As you can see the condition has now changed to `person.height < 72`. Lastly, using `.map()` method:

```javascript
const belowSixNames = belowSix.map((person) => person.name);
```
we create a new array that gives us the `name` of those that are below 72 inches in `height`:

```javascript
// LOG: [ 'Joe', 'Mike', 'Loid' ]
```

## Conclude
I'm sure that there are will be many cases where you'll find yourself using the `.filter()` method on your array as you dive deeper into the programming world. As for myself, I can see it being used in my future projects where I need to organize large amounts of data. I hope you've enjoyed the read!

![Basketball Win](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oli3ovubaswsf3xu7wi9.jpeg)


Sources:
[MDN web docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter#description)
[w3 Schools](https://www.w3schools.com/jsref/jsref_filter.asp#:~:text=The%20filter()%20method%20creates,not%20change%20the%20original%20array.)
[Geeksforgeeks](https://www.geeksforgeeks.org/javascript-array-filter-method/)