The filter() method

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.

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:

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)

Let's look at some examples of the .filter() method:

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:

// 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

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.

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:

// 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:

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:

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:

// 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!

Sources:
MDN web docs
w3 Schools
Geeksforgeeks