How to Filter an Array with Multiple Conditions in JavaScript

Filter an Array with Multiple Conditions in JavaScript

Filter an Array with Multiple Conditions using && (And) operator

To filter an array with multiple conditions:

1. Use the Array.filter() method on the array.
2. Apply the && (And) operator to check for multiple conditions.
3. The Array.filter() method will return an array of all elements that satisfy the conditions.

Example –

const people = [
  {name: 'Matthew', age: 30},
  {name: 'Bob', age: 40},
  {name: 'Weston', age: 30},
];

const results = people.filter(element => {
  return element.age === 30 && element.name === 'Weston';
});

console.log(results);

Here’s what the above code is doing:

1. We have an array of objects called people.
2. We call the filter() method on the people array.
3. We pass in a callback function to the filter() method.
4. The callback function returns true if the element’s age is 30 and the element’s name is Weston.
5. The filter() method returns a new array with the elements that returned true in the callback function.

The function we passed to the Array.filter() method is invoked with each element in the array.
If the function returns a value that is truthy, the element from the array gets added to the results array.
The element will only be added to the filtered array if both conditions are met.

If the callback function never returns a truthy value, then Array.filter() will return an empty array.

The Array.filter() method can be used with the || (or) operator to filter an array with multiple conditions, where only one condition has to be satisfied. This will return a new array with only the elements that satisfy at least one condition.

Filter an Array with Multiple Conditions using || (or) operator

To filter an array with multiple conditions:

1. Call the Array.filter() method on the array.
2. Use || (or) operator to check if only one of two conditions has to be satisfied.
3. The Array.filter() method will return an array of all elements that satisfy the conditions.

Example –

const people = [
  {name: 'Matthew', age: 30},
  {name: 'Bob', age: 40},
  {name: 'Weston', age: 30},
];

const results = people.filter(element => {
  // using OR (||) operator
  return element.age === 40 || element.name === 'Weston';
});

console.log(results);

Here’s what the logic in the code:

1. We have an array of objects called people.
2. We call the Array.filter() method on the people array.
3. We pass in a callback function to the Array.filter() method.
4. The callback function takes in an element.
5. The callback function returns return the element if the element’s age is 40 OR the element’s name is Weston.
6. The filter method returns a new array with the elements that return true.

We checked for multiple conditions using the OR || operator.

The results array will include elements for which either of the conditions returns a truthy value.

In the code sample, we check for objects with the property age of 40 or the property name of Weston.
The Array.filter() method returns elements that satisfy at least one of the conditions. In this case, there are two elements in the array that satisfy at least one of the two conditions, so the Array.filter method returns both of them.