Select Page

Just like the `map` method, JavaScript provides us with another very helpful method, `filter`. And as the name suggests we can use it to filter out values from an array.

Let’s start by looking at how Mozilla Developer Network describes the `filter` method:

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

• Of course we will need an array, to run the `filter` method on
• We have to supply a function to this method
• This function is called on every element in the array
• Elements are filtered out depending on the test in the function
• And the output is a new array

Now that the definition is out of our way, let’s look at an example. We have an array of ten numbers and we want to extract all even numbers from this array into a new array.

Here is how we achieve this using a For Loop:

```let tenNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumbers = [];
for(i = 0; i < tenNumbers.length; i++) {
if(tenNumbers[i] % 2 === 0){
evenNumbers.push(tenNumbers[i]);
}
}
```

What's going on here? let's see :

• Create a new array
• Keep track of each element
• Check if each element is even
• If yes push element into the new array

This can also be achieved using a library like Lodash:

```let tenNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumbers = _.filter(tenNumbers, function(num) { return num % 2 === 0; });
```

And now using JavaScript's filter method

```let tenNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumbers = tenNumbers.filter(function(num) { return num % 2 === 0; });
```

#### Important notes about the `filter` method

1. The `filter` method is defined on `Array.prototype`, so we call it on any array, and it accepts a callback as its first argument.
2. In the above code we are passing just one argument to the function, that is the current number. But we can pass a total of three arguments to this function:
• The current item in the array
• The array index of the current item
• The entire array you called map on
3. The `return` statement. We have to make sure that the `return` statement returns a `boolean` value. If we forget the `return` statement, the function will return `undefined` and `filter` will assume it as `false` and we will get an empty array. And if the `return` statement does not return a `boolean` value, JavaScript logic will be applied to figure out if it's `true` or `false`, which always results in hidden bugs.

We can also use ES6(ES2015) 'fat arrow' :

```let tenNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumbers = tenNumbers.filter(num => num%2 === 0);
```

And now a look at a more practical example, suppose we call an API that returns an array of objects. Something like this :

```let userDetails = [
{'name': 'User1', 'age':46},
{'name': 'User2', 'age':36},
{'name': 'User3', 'age':26},
{'name': 'User4', 'age':16},
{'name': 'User5', 'age':14}
];
```

Now, we decide that we just want to display users above the age of 18. Here is how we will achieve this:

```let userDetails = [
{'name': 'User1', 'age':46},
{'name': 'User2', 'age':36},
{'name': 'User3', 'age':26},
{'name': 'User4', 'age':16},
{'name': 'User5', 'age':14}
];
let adultUsers = userDetails.filter(user => user.age >= 18);
```

Note, in case you are using Angular, it would be a good idea to use a pipe to achieve this result.

That's about it for this post.