[JS] - Filter

June 13, 2021

The purpose of the filter method is to apply a condition to an array and keep only the elements satisfying it.

In this funny example, you have an array:

var food = [burger, frenchFries, chicken, popCorn];

By applying the filtering condition “isVegetarian”, you filter out every possible consumption of meat (burger and chicken), you end up with the filtered new array:

[frenchFries, popCorn];

Example of use

Let’s just use the example I used in in my map article.
You work for LinkedIn and your manager need you to implement a function to filter out candidates with a particular profession.
The data are:

var candidates = [
  { firstName: "Chloe", lastName: "Ross", profession: "UX/UI Designer" },
  { firstName: "John", lastName: "Doe", profession: "Front End Engineer" },
  { firstName: "Jane", lastName: "Does", profession: "Back End Engineer" },
  { firstName: "Jill", lastName: "Hope", profession: "Back End Engineer" },
  { firstName: "Jake", lastName: "Guy", profession: "Back End Engineer" },
  { firstName: "Mike", lastName: "Gordon", profession: "QA Tester" },
];

So, let’s filter the Back End Engineer candidates:

var candidates = [
   { firstName: "Chloe", lastName: "Ross", profession: "UX/UI Designer" },
   { firstName: "John", lastName: "Doe", profession: "Front End Engineer" },
   { firstName: "Jane", lastName: "Does", profession: "Back End Engineer" },
   { firstName: "Jill", lastName: "Hope", profession: "Back End Engineer" },
   { firstName: "Jake", lastName: "Guy", profession: "Back End Engineer" },
   { firstName: "Mike", lastName: "Gordon", profession: "QA Tester" },
];

candidates = candidates.filter(candidate => candidate.profession === "Back End Engineer");

console.log(candidates);

Giving the following output (you can test it in your dev tool with F12 or there, by replacing the content of script.js):

[
  {
    "firstName": "Jane",
    "lastName": "Does",
    "profession": "Back End Engineer"
  },
  {
    "firstName": "Jill",
    "lastName": "Hope",
    "profession": "Back End Engineer"
  },
  {
    "firstName": "Jake",
    "lastName": "Guy",
    "profession": "Back End Engineer"
  }
]

The result is an array of objects following the condition providing in the filter method.
You successfuly implemented the feature your manager asked for!

So, how do we implement filter?

Contrary to map, you should not return anything in your callback since it’s the condition that will filter the elements.

Implementation

function mapFunction(array, callback) {
  var newArray = [];

  for (let [index, value] of array.entries()) {
    if (callback(value, index, array)) {
      newArray.push(callback(value, index, array));
    }
  }

  return newArray;
}

Notice how the condition determine whether or not an element should be pushed in the array. This correspond to the filter.

To conclude - The key takeaways

Filter filter each element of an array with a condition
It takes in argument the current element of the array and the index/array are optionals
If this paradigm intrigue you, check this article on functional programming!

You can go on with my article on reduce or check out this one on map.

Any remarks ?

Make a pull request or open an issue!
Don’t know how to do it ? Check out this very well explained tutorial