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.
- Any function you provide as
filter()
's argument will get called on each item in the calling array. - A calling array is an array on which you used
filter()
. So, inbestColorsList.filter(func)
,bestColorsList
is the calling array. filter()
is sometimes written asArray.prototype.filter()
because it is a method of theArray
object'sprototype
property.
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
});
() => {...}
is an arrow function shorthand for function () {...}
.
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.
- You can rename the
currentItem
,index
, andarray
parameters to anything you prefer. - The computer will invoke
filter()
's function argument only once for each item inside the calling array. The invocation will be in the order of the array items from left to right. filter()
does not change the original array. (Although you can do so with the callback argument.)
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
).
The colors
array is the calling array in the example above.
Learn CSS Grid with Images
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",
];
- Use
every()
if you only need to returntrue
orfalse
when all the calling array's items pass or fail the specified test. - Suppose you only need to return the item that first passed the specified test. In that case use
find()
. - Use
findIndex()
if you need to return only the index of the first item that passed the specified test.
Overview
filter()
creates a new array that contains all the calling array's elements that passed the test specified by the method's function argument.