JavaScript in 1 minute: Master the higher order function filter()

A higher order function is a function that takes another functions as argument or returns a function. Today I cover everything you need to know about the built-in higher order function filter().

Photo by Jay Zhang on Unsplash

What is the filter method

The filter method has its name for a reason. Its task is, to filter out values. Therefore you can pass a function to tell the filter method what kinf of values you want or don’t want to keep.

Code Examples

As there is not that much explaining to do, let’s look at some code examples.

Filter odd numbers

const siffror = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,];

function isOdd(item) {
    return item % 2;
}

const oddNumbers = siffror.filter(isOdd);

console.log(oddNumbers);
// Expected Output: [ 1, 3, 5, 7, 9 ]

So, what happens here? We have an array with numbers and a function calles odd that returns true if a given value is odd. We call the filter method on the array siffror and push it to the new array oddNumbers if the the function isOdd returned true.

As you can imagine, we can use any mathematical operation to filter values such as odd or even numbers, number bigger or smaller than a specific value. Anything.

Let’s look at an example with strings.

Filter capitalised words

const words = [ "hello", "Olof", "these", "are", "Just", "Some", "Words" ];

function isWordCapitalized(item) {
    let n = item[0].charCodeAt(0);
    return n >= 65 && n < 91;
}

const capitalizedWords = words.filter(isWordCapitalized);

console.log(capitalizedWords);

The main concept is the same as before. If the function, passed to the filter method returns true, it pushed the value the the new array. The only difference here is, that we have another array and we check if the first letter of the string is a big letter.

Recreate the filter method

As I did before with the map method, let’s try to write our own filter function.

const words = [ "hello", "Olof", "these", "are", "Just", "Some", "Words" ];

function isWordCapitalized(item) {
    let n = item[0].charCodeAt(0);
    return n >= 65 && n < 91;
}

Array.prototype.myFilter = function (customFilterFn) {
    const modifiedArr = [];

    for (let i = 0; i < this.length; i++) {
        if (customFilterFn(this[i])) {
            modifiedArr.push(this[i]);
        }
    }
    return modifiedArr;
}

const capitalizedWords = words.myFilter(isWordCapitalized);


console.log(capitalizedWords);

Let’s go through it. The array wordsand the function isWordCapizalized are unchanged. New is the function myFilter.

At first I used Array.prototype to make the function myFilter available for all arrays. Since the function can be called directly from an array, we don’t need to provide the data as a parameter. We can access them with the this keyword. We create a new empty array. Then we go through every item of the array, that called the function myFilterand push the value to the new array if the function customFilterFn returns true.

As you can see, it is not that hard to rebuild that function. Try to do it on your own. It is a nice exercise and helps you understand what the function actually does.

If you learned something from this article, leave me clap, a comment or share this article to support me. I welcome you to follow me here or on LinkedIn.

Happy coding.