This article will show you how to filter an array using multiple conditions, to return multiple values. Example code is provided.
We’ve already covered filtering arrays in general – this article covers specifically how multiple conditions can be used with the Array.filter() method.
The Array.filter() Method
The filter() method is available on all arrays in JavaScript. It creates a new array, containing only the items from the original array which passes all conditions in a provided function.
filter() Method Syntax
The syntax for the array filter() method is as follows:
ARRAY.filter(ELEMENT => FUNCTION)
Note that:
- ARRAY is any array variable
- ELEMENT is the name you wish to use for the variable which refers to each item in the array as it is tested
- FUNCTION is the function which will test each ELEMENT
- It should return TRUE or FALSE for each element to decide whether it will appear in the resulting array
- the filter() method returns an array containing only the items in the original ARRAY which match the conditions in FUNCTION
Filtering Arrays Using Multiple Conditions
The function which decides whether an item in the original array should be included in the resulting array can contain any number of conditions – in fact, it’s a standard JavaScript function, so you can do pretty much whatever you want in it – just so long as you return a boolean TRUE value at the end for items you wish to see included in the result.
Example: Filtering Numbers Using Multiple Conditions
Below, an array of numbers is defined, and then filtered according to multiple conditions:
let numbers = [5, 7, 14, 29, 50, 16, 19];
let numbersFiltered = numbers.filter(function (currentElement) {
return currentElement > 10 && currentElement < 20;
});
The numbersFiltered array will contain only the entries from the original array which are both greater than 10 and less than 20
More conditions can be added – the below function filters the results to only numbers between 10 and 20 which are even:
let numbersFiltered = numbers.filter(function (currentElement) {
return currentElement > 10 && currentElement < 20 && currentElement % 2 == 0;
});
The above example uses the % operator, which returns the remainder when the number preceding it is divided by the number following it. If the remainder when divided by 2 is 0, the number is even.
Example: Filtering Strings Using Multiple Conditions
Below, an array of strings is defined and filtered using multiple conditions:
let strings = ['dog', 'cat', 'bird', 'pig', 'giraffe', 'fox', 'bat'];
let stringsFiltered = strings.filter(function (currentElement) {
return currentElement.startsWith('b') || currentElement.length > 4;
});
The stringsFilteredArray will contain only the items from the original array which start with ‘b’ or those with a number of characters greater than 4 – resulting in:
[ "bird", "giraffe", "bat" ]
Example: Filtering Objects Using Multiple Conditions
Below, an array of objects is defined and filtered using multiple conditions:
let cars = [
{make: 'Ford', year: 1997, colour: 'yellow'},
{make: 'GM', year: 1967, colour: 'red'},
{make: 'Honda', year: 1988, colour: 'blue'},
{make: 'Ford', year: 1985, colour: 'pink'},
];
let carsFiltered = cars.filter(function (currentElement) {
let result = currentElement.year > 1980 && currentElement.year < 1990;
result = result && currentElement.make == 'Ford';
return result;
});
The condition is split by assigning the first check (year is between 1980 and 1990) to a variable, and then performing additional checks (whether it is a Ford) and updating the variable to reflect whether all checks have passed, before returning it.
