Useful JS functions you aren't using: Array.filter
Tags: basics, javascript
Published: 2017-04-04 15:53:28

---
title: "Useful JS functions you aren't using: Array.filter"
published: true
description: Built in functions you forgot existed.
cover_image: 
tags: Basics, Javascript
---

Suppose you had a list of students in a classroom, and you want to know how many are girls. You might write something like this:


```js
var students = [
  {name:"Davey", gender:"male",age:"10"},
  {name:"Susie", gender:"female",age:"10"}, 
  {name:"Frank", gender:"male", age:"10"},
  {name:"Lindsay", gender:"male", age:"11"},
  {name:"Terry", gender:"female", age:"10"},
  {name:"Melissa", gender:"female", age:"11"}
]

var girlsCount = 0;
for(s = 0; s < students.length; s++){
    if(students[s].gender === "female"){
        girlsCount++;
    }
}

console.log("The Number of girls is: " + girlsCount);
//The Number of girls is: 3
```

That's a fine, functional way to do it. If you utilize the language features of Javascript, you can save yourself some time. Try Javascript's `filter` function attached to every array!

```js
var girls = students.filter(function(s){return s.gender === "female" });
console.log("The Number of girls is: " + girls.length);
```

`Filter` returns a new array that is a subset of the array you call it on, wherein the callback function returns either true or false. A `true` value will include that item in the new array. A `false` value will leave it out. This makes it easy to write filters that can accommodate however simple or complex you need. In our class, lets say we instead want to find all the students that are eleven, and have the letter 'e' in their name. With a filter, we just need to return `true` if a student object has those two things:


```js
var eAndEleven = students.filter(function(s){return s.name.match(/e/gi) && s.age == 11});
eAndEleven.map(function(s){console.log(s.name)});

```

We can use the [`Array.map` function](https://dev.to/aeiche/useful-js-functions-you-arent-using-arraymap) to output all those matching students to our console.

Speaking of `Array.map`, suppose you need to apply some transformations to your array, before you generate a subset of it. Because these methods return new arrays, you can use them chained together:

```js

  students
  .map(function(s){ s.age++; return s})
  .filter(function(s){ return s.age < 12})
  .map(function(s){console.log(s.name)})

```

This code adds a year to everyone's age, then filters out those who are less than 12, and the final `map` outputs the filtered array to the console.

Like `map`, `filter` allows you to make things more compact and utilizes built-in language features to make your life easier as a developer.

If you're using ES6/ES2015, you can utilize arrow functions to make your code even more compact:

```js
  students
  .map(s=>{ s.age++; return s})
  .filter(s=>{ return s.age < 12})
  .map(s=>{console.log(s.name)})
```

_I got lots of comments on twitter about my first article, [Useful JS Functions You Aren't Using: Array.map](https://dev.to/aeiche/useful-js-functions-you-arent-using-arraymap), which encouraged this as a series, and things to include. Thank you to folks for contributing back, and offering suggestions._