Skip to content
Latest: The updated version of the Creating NPM Package (React JavaScript) book is out

filter() JavaScript Array Method – Explained with Examples

Whenever you use filter() on an array, the method does the following:

  1. It creates a new array.
  2. It populates the newly created array with all the calling array’s elements that passed the test specified by filter’s function argument.

Suppose none of the calling array’s items passed the function argument’s test. In that case, filter() will create and return only an empty array.

Syntax of the filter() Method

filter() accepts two arguments: a “callback function” and a “thisValue.” Here is the syntax:

callingArray.filter(callback, thisValue);

Argument 1: callback

A function is the first argument accepted by the filter() method. It is a required argument containing the code you want the computer to use to test each item of the calling array.

The callback function returns the Boolean true (or false).

In other words, the callback returns true whenever an element of the calling array passes the specified test. In that case, filter() will duplicate the item into the newly created array.

But the callback will return false whenever an item fails the specified test. In that case, filter() will not copy the failed item into the newly created array.

Keep in mind that filter()’s function argument accepts three parameters: currentItem, index, and an array.

callingArray.filter((currentItem, index, array) => {
// Test to run on each item of the calling array
});

Parameter 1: currentItem

The currentItem parameter is required. It represents the current calling array’s item the computer is currently processing.

Parameter 2: index

The index parameter is optional. It represents the index number of the item the computer is currently processing.

Parameter 3: array

The array parameter is also optional. It represents the calling array.

Argument 2: thisValue

A thisValue is the second argument accepted by the filter() method. It is an optional argument representing the value you want to use as the function argument’s this value.

callingArray.filter((currentItem, index, array) => {}, thisValue);

Suppose you do not provide a second argument. In that case, the computer will use undefined as the callback function’s this value.

Example 1: How to Use filter() without a thisValue Argument

Here is an example of the filter() method without a thisValue argument:

const colors = ["red", "blue", "green", "white", "yellow", "pink"];
function eachValue(currentItem) {
return currentItem.length > 4;
}
const newArray = colors.filter(eachValue);
console.log(newArray);
// The console.log invocation above will return:
["green", "white", "yellow"];

Try it on StackBlitz

In the snippet above, we used the filter() method to filter out the colors array’s items having lengths greater than four (4).

Therefore, the computer will create a new array and populate it with the values that passed the test of having lengths greater than four (4).

Example 2: How to Use filter() with a thisValue Argument

Here is an example of the filter() method with a thisValue argument:

const colors = ["red", "blue", "green", "white", "yellow", "pink"];
function eachValue(currentItem, ind, arr) {
arr[ind + 1] += this;
return currentItem.length > 4;
}
const newArray = colors.filter(eachValue, "Car");
console.log(newArray);
// The console.log invocation above will return:
["blueCar", "greenCar", "whiteCar", "yellowCar", "pinkCar"];

Try it on StackBlitz

In the snippet above, we used the filter() method to filter out the colors array’s items having lengths greater than four (4).

Observe that we used the eachValue callback function to add filter()’s this value to each of the colors array’s items—except the first one.

In other words, we used the callback function to mutate the original array.

Therefore, colors’ current content will be:

[
"red",
"blueCar",
"greenCar",
"whiteCar",
"yellowCar",
"pinkCar",
"undefinedCar",
];