Using Array.filter() To Filter Search Criteria In ES2015

Introduction

This article mainly focuses on the Array.filter() method is used to filter based on search criteria. Let’s say, you are using Angular as a front-end technology in which your code base 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 which has a method called filter() which can satisfy our needs according to the scenario.

The Array.filter() method simply creates a new array for us that 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

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 contains all the elements that are to be filtered from (as arr).
2. The string in which the elements need to be filtered (as a 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.

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 filter items. 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 comparisons (strictly equal and strictly not equal), please refer to this documentation.