filter() JavaScript Array Method – Explained with Examples
Whenever you use filter() on an array, the method does the following:
- It creates a new array.
- 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"];
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"];
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",];