Using Array.filter() to filter search criteria in ES2015
Tags: javascript, filter, es2015, array
Published: 2021-05-23 03:24:33

#Introduction
This article mainly focuses on the *Array.filter()* method used to filter based on a search criteria. Let’s say, you are using Angular as a front end technology in which your codebase will be written in TypeScript. Here, I will be using ES2015 to demonstrate the example. I will only be diving deep into the *Array.filter()* method on how it works.

#Explanation
For simplicity, let's consider an array of fruits. The requirement to filter out the fruits based on the search criteria can be achieved through the *Array.filter()* method. JavaScript provides standard built-in objects that make our work easier and helps to reduce the number of lines needed to code in order to achieve a certain task. One of the standard built-in objects is the Array class that has a method called *filter()* which can satisfy our need according to the scenario.

The Array.filter() method simply creates a new array for us which has only the elements that satisfy a certain condition. This method can filter by taking in one of the following three types of arguments:

  1.The value of the element which needs to be filtered
  2.The array object that is being traversed
  3.The index of the element present in the array

>Its is very important to note that the Array.filter() method does not change the array in which this method is called from. Instead, it only creates a new array with the filtered elements leaving the original array unchanged. In technical terms, we can say it does not mutate the array on which it is called.

Let’s see a real example taken from [MDN Web Doc](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)

`const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];`

An array of fruits is defined as shown above. Now we need to filter out fruits that contain the phrase *“ap”*. After filtering, an array with elements of *“apple”* and *“grapes”* must be returned.

In this example, the third type of argument (as mentioned above) will be used as it suits best for this scenario. Also, to filter we need to feed the function with two things:
  1.The **array** which contains all the elements that are to be 
    filtered from (as *arr*).
  2.The **string** in which the elements need to be filtered (as 
    *query*).

```
const filterItems = (arr, query) => {
         return arr.filter(el =>    
             el.toLowerCase().indexOf(query.toLowerCase()) !== -1)
}

console.log(filterItems(fruits, 'ap'))
```

The above-mentioned code returns the expected array of fruits but let’s see how this works. You need to be familiar with ES2015 syntax in order to understand this which is not rocket science.

Here, a constant is defined with the name of *filterItems* which has an anonymous function that takes in two parameters, and the returned value is stored in this constant. Now let’s see what this anonymous function does. It uses the Array.filter() method and we can see that the *arr* parameter is of type Array. Therefore, we can take advantage of JavaScript’s built-in filter function provided for Array Objects.

The passed-in array parameter in the name of arr is invoked with the filter method and an arrow function expression (el => el) is used to perform the condition in which the array has to be filtered. For more information on arrow function expression, refer to this [documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions).

Here, the *arr.filter()* method takes the first element of the array (“apple”) and stores it in el, then converts that string element to lower case and compares it with the query string. Before comparing, the query string is also converted to lower case to eliminate the failure of comparison due to case-sensitive characters in both strings. The *indexOf()* method returns the first index of the element found in the array which has the value passed into (in this example “ap”). If not, it returns -1. Therefore, within the arrow function expression, we are checking if the index that is returned from the *indexOf()* method is strictly not equal to -1. By doing this, any element that contains *“ap”* will satisfy the condition and will be returned to filterItems. If not, that element is skipped as the condition fails. This process repeats again for the second element (“banana”) in arr and the remaining elements. Finally, filterItems will have an array of elements *[“apple”, “grapes”]*.

For more information on strict comparison (strictly equal and strictly not equal), please refer to this [documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness).

If you understood this piece of explanation, please do support me on [twitter](https://twitter.com/imhishammhmd) by providing feedback. This will help me write more blogs and share my understanding with y’all. Cheers!