Array filter() method is usually the go-to method if we need to iterate through to perform a same validation code on all element and return all the element in a new array that pass validation. Array filter() is introduced since ES5.
What is Array filter Method
Array refers to standard built-in object in JavaScript and filter() or Array.proto.filter() method is part of Array as shown in the documentation. It is design to have a callback function execute over every element and return a new array consisting of all the element validated true.
filter() method takes in a callback function that have up to 3 argument inputs. 1st argument being the element data is compulsory where it is the element. 2nd argument is the index and 3rd argument is the original array where these are optional.
// Syntax of forEach() method
// passObject is optional, its purpose is for us to pass values in
myArray.filter(callback[,passObject]);
// Syntax of callback function
function(currentElement)
function(currentElement, index)
function(currentElement, index, originalArray)There are 3 ways of how we can define the callback function. There are:
- Arrow function
- Callback function
- Inline callback function
Let’s look at the illustration below. Since we do not need to pass data into the callback function, there is no need for passObject.
// Arrow Function Type
myArray.filter((currentElement) => {
return true;
});
// Callback Function Type
myArray.filter(callbackFn);
// Inline Callback Function Type
myArray.filter(function(currentElement) {
return true;
});Features of filter()
- Process on all elements and return a new array with elements that match condition.
- Before the first execution of callback, it will capture and fix the array size to process.
- Will not process new array elements.
- If a subsequent array element is updated in the earlier iteration, this new value will pass to the callback function when come to its iteration.
- It an iteration return false, the element value not be in the return array.
- If all iteration return false, empty array will be the return value.
Usage of Array filter() Method
Pre-ES5 Style
To write it with pre ES5 style, we will first need to create an empty array variable. Subsequently, if any of the element pass the validation, we will copy the element to the new array.
In the illustration below, we want a list of all person that have age of 10 or more.
var personArray = [
{ name: 'Person1', age: 6 },
{ name: 'Person2', age: 30 },
{ name: 'Person3', age: 80 },
];
var result = [];
for (var i = 0; i < personArray.length; i++) {
if (personArray[i].age > 10) {
result.push(personArray[i]);
}
}
console.log(result); // [{ name: 'Person2', age: 30 }, { name: 'Person3', age: 80 }]ES5 Style
Let’s look into how to use filter() method with the below example.
First, let’s define a basic array consisting of person and their age. Next, we add a condition to get a list of person with age greater than 5 and 10. We will just need to use the element here. No need to use index and original array data.
const personArray = [
{ name: 'Person1', age: 6 },
{ name: 'Person2', age: 30 },
{ name: 'Person3', age: 80 },
];
const ageAbove10Validation = personArray.filter((currentElement) => {
return currentElement.age > 10;
});
const ageAbove5Validation = personArray.filter((currentElement) => currentElement.age > 5);
console.log(ageAbove10Validation);
console.log(ageAbove5Validation);
// [{ name: 'Person1', age: 6 }, { name: 'Person2', age: 30 }, { name: 'Person3', age: 80 }]
// [{ name: 'Person2', age: 30 }, { name: 'Person3', age: 80 }]Conclusion
From the above illustration, we can see that we will require less code if we use filter() method instead of a traditional for-loop. In addition, there is no need for external variable and pushing to array since filter() will automatically create an array to return.
More Reading
Here are more articles on Array related methods.
No Responses Yet