The Ultimate Guide to JavaScript Algorithms: Implementing a Custom Filter

Publikováno: 13.3.2019

In JavaScript, the .filter() function is often used to loop through an array and extract the elements that pass a certain condition specified in a callback function.

Ever wonder...

Celý článek

In JavaScript, the .filter() function is often used to loop through an array and extract the elements that pass a certain condition specified in a callback function.

Ever wondered how this works?

In this article, we build on our understanding of JavaScript and proficiency with array manipulation by building our own modified filter function.

You ready? Let's have some fun!

You should already have your development environment setup for this course. Open the cloned repository and inside the Beginner folder, navigate to the arrayFilter folder. Our work for this challenge will be done in here. Make sure to follow along in the index-START.js file.

The Challenge

Return the first element from the given array that passes the test specified by the provided function. Both the array and function are passed into the function as arguments as shown below:

arrayFilter(arr, func)

Bear in mind that the function func will return true when the test is passed and false when it isn’t.

Algorithmic Thinking

To solve this challenge, we certainly have to somehow loop though each element in the supplied array and test them to see if they pass the condition specified in the function. This would require that we pass the element into the function and examine the result of its evaluation.

At the end, we are expected to return the first element that passes the test.

Code Implementation

Let’s now consider three(3) ways to solve this challenge. They are:

An Imperative approach
Using .filter() ????
Using .find()

The first approach would be an imperative solution where we do a detailed specification of how the result is arrived at. The other two(2) would make use of helper functions to present a more concise solution.

Excited already?

An Imperative Approach

In this approach, we use a for…of loop to iterate through the received array arr while testing each element elem to see if it passes the specified condition.

function arrayFilter(arr, func) {
  for (let elem of arr) {
    if (func(elem)) {
      return elem
    }
  }
  return undefined
}

Using an if-statement, we perform the test by passing the current element elem into the received function func. Remember that this will return either true when it passes or false when it fails. When it returns true, it causes the if-block to execute, thus returning the current element as the result. In a case where none of the elements pass, the function returns undefined.

We good! Now let’s get lazy. ????

Using .filter()

The .``**filter()** method creates a new array from another, using all the elements that pass the test specified by the provided function.

In the solution below, we implement a concise solution to this challenge using this method by calling it on the received array with the provided function as an argument. This returns an array of passing elements which we store as filteredArray.

function arrayFilter(arr, func) {
  let filteredArray = arr.filter(func);
  return filteredArray[0] ? filteredArray[0] : undefined;
}

Using a ternary operator, we check if filteredArray contains any element in its first index filteredArray[0]. If it does, we return it as the result. When it doesn’t, we return undefined.

Using .find()

In this approach we use the .find() method to directly retrieve the first element that passes the specified test.

The .``**find()** method returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned.

function arrayFilter(arr, func) {
  return arr.find(func)
}

Notice that we return the result from calling the .find() method on the array while passing in the test function as an argument. Correspondingly, it will return the first value that passes the test and when no element passes, it’d return undefined.

Testing

Testing correctness with Jest

To test the solutions above, run the command below in your terminal:

npm run test arrayFilter

Gladly, we passed ???? .

Testing Performance with JSPerf

To carry out a performance based comparison of the solutions above, follow this link to JSPerf. The screenshot below reveals the result of this test.

The result above reveals that the optimal solution is the Imperative Approach.

Practical Application

This challenge finds its application in data manipulation, sorting and conditional rendering of data within applications. It also passes as a coding challenge.

Conclusion

We have now successfully solved this challenge and identified the optimal solution among all the approaches explored. Feel free to explore more ways and share in the comment section. The beauty of challenges of this nature, is that they give us some insight into how some JavaScript functions may work under the hood, thus improving our command of JavaScript.