JavaScript Filter Function

This tutorial covers:

1. What does the JavaScript Array Filter Function do?
2. How do you use the JavaScript Array Filter Method?
3. What is a JavaScript Array Filter example?

Let's get started →

What does the JavaScript Array Filter Function do?

The JavaScript Array Filter Method is used to filter out elements from a JavaScript Array.

[1, 2, 3, 4, 5].filter(biggerThanTwo)

When the Filter Method is run on an array JavaScript will return an array of all of the elements that passed the filter function.

[3, 4, 5]

Basically, JavaScript takes the array you define and runs a function you define on each element of said array.

If the function return value is true when the function is run on that particular element, then it keeps the element.

If the function return value is false when the function is run on that particular element, then it doesn't keep the element.

After the Filter Method has been run on every element of the array it returns a new array with only the elements that it kept.

How do you use the JavaScript Array Filter Method?


To use the JavaScript Array Filter method we'll need three things:

  1. An array with elements
  2. A function that will serve as the filter function
  3. The filter method we pass the filter function into


Let's start out with an array of the first 5 numbers bigger than zero.

[1, 2, 3, 4, 5]

When we have the JavaScript interpreter evaluate it we get the JavaScript Array back.

JavaScript create Array

You can see that we get the same array back.


We can check to make sure that it is a JavaScript Array

[1, 2, 3, 4, 5] instanceof Array
JavaScript check Array type

You can see that it is a type of Array because the instanceof Array evaluated as true.


Next we need a function that will serve as our filter function.

This function will be a JavaScript Callback Function because it is a function being passed as a parameter into another function.

Note that to keep things simple we will not use an anonymous JavaScript Function, we will use a Named JavaScript Function.

function biggerThanTwo(numberToEvaluate) {
    booleanAnswer = numberToEvaluate > 2;
    return booleanAnswer;
}
JavaScript named callback function

This function, named biggerThanTwo, will take in a number as its single parameter.

JavaScript function single parameter


The number passed into the function will then be compared to the number 2 to see if it is bigger than it.

JavaScript function boolean comparison

When evaluated this will either return a true or false Boolean value.


This Boolean value is assigned to the variable booleanAnswer.

JavaScript Filter Function - Call Back Function boolean value


Finally, the boolean value is returned.

JavaScript Filter Function - callback function return statement


Let's test it out on the numbers 1, 2, 3.


We start out with the number 1.

biggerThanTwo(1);

JavaScript Filter Function - callback function test with number 1

We can see that we get false because the number 1 is not bigger than the number 2.

Next we test the number 2.

biggerThanTwo(2);

JavaScript Filter Function - callback function test with number 2

We can see that we get false because the number 2 is not bigger than the number 2.


Finally we test the number 3.

biggerThanTwo(3);

JavaScript Filter Function - callback function test with number 3

We can see that we get true because the number 3 is bigger than the number 2.

The final thing we do is to use the JavaScript Array Filter method to run our callback function on each element of the initial array we are using in this JavaScript Filter Function example.

[1, 2, 3, 4, 5].filter(biggerThanTwo);

JavaScript Filter Method Example


You can see the array [1, 2, 3, 4, 5].

JavaScript Filter Method - Example Array


You can see that the filter method is called off of the array.

JavaScript Filter Method - Example Filter Method


You can see that we pass in the callback function biggerThanTwo we defined.

JavaScript Filter Method - Example Callback Function

Important to note that we are passing in the function with the open and close parentheses.

JavaScript Filter Method - Example callback function

This means that we're not running the function when we pass it in.

The JavaScript Filter function will run the function for us on each element of the array.


Finally, you can see that the result is [3, 4, 5].

JavaScript Filter Method - Example Result

Which is what we would expect as 1 and 2 are not bigger than the number 2 while 3, 4, and 5 are bigger than the number 2.

What is a JavaScript Array Filter example?

The JavaScript Array Filter Example we worked through above is as follows:

[1, 2, 3, 4, 5];
// (5) [1, 2, 3, 4, 5]

[1, 2, 3, 4, 5] instanceof Array;
// true

function biggerThanTwo(numberToEvaluate) {
    booleanAnswer = numberToEvaluate > 2;
    return booleanAnswer;
}
// undefined

biggerThanTwo(1);
// false

biggerThanTwo(2);
// true

biggerThanTwo(3);
// false

[1, 2, 3, 4, 5].filter(biggerThanTwo);
// (3) [3, 4, 5]

Here's the result:

JavaScript Filter Method - Example Result

Now you know what a JavaScript Filter Function Method is and how to construct it and run it on a JavaScript Array with a callback function of your choosing.

Copyright © 2021 JavaScriptFunction.com - All rights reserved.