Skip to main content

How to Filter an Array with Multiple Conditions in JavaScript

A common data manipulation task is to filter an array to find elements that satisfy several conditions at once. For example, you might need to find all users who are "active" and "admins", or all products that are either "out of stock" or "on sale". The Array.prototype.filter() method, combined with logical operators, is the perfect tool for this.

This guide will teach you how to use filter() with the logical AND (&&) and logical OR (||) operators to handle complex filtering requirements.

The Core Method: Array.prototype.filter()​

The filter() method is a built-in array method that creates a new array containing all elements that pass a test implemented by the provided callback function. The callback function should return true for elements you want to keep and false for those you want to discard.

Filtering with an AND Condition (All must match)​

Use Case: When you need to find elements that satisfy all of several conditions simultaneously.

To achieve this, you connect your conditions inside the filter callback using the logical AND (&&) operator. The element will only be included in the new array if every condition is true.

You have an array of users and need to find only the users who are both admins and active.

// Problem: How to find only the active admins?
const users = [
  { name: 'Alice', role: 'admin', status: 'active' },
  { name: 'Bob', role: 'editor', status: 'active' },
  { name: 'Charlie', role: 'admin', status: 'inactive' },
  { name: 'David', role: 'admin', status: 'active' },
];

Solution:

const users = [
  { name: 'Alice', role: 'admin', status: 'active' },
  { name: 'Bob', role: 'editor', status: 'active' },
  { name: 'Charlie', role: 'admin', status: 'inactive' },
  { name: 'David', role: 'admin', status: 'active' },
];

const activeAdmins = users.filter(user => {
  return user.role === 'admin' && user.status === 'active';
});

console.log(activeAdmins);

Output:

[
  { name: 'Alice', role: 'admin', status: 'active' },
  { name: 'David', role: 'admin', status: 'active' }
]

Filtering with an OR Condition (Any can match)​

Use Case: When you need to find elements that satisfy at least one of several conditions.

To achieve this, you connect your conditions using the logical OR (||) operator. The element will be included if any of the conditions are true.

For example, you have an array of products and need to find all products that are either on sale or have a low stock count.

// Problem: How to find products that are on sale or low in stock?
const products = [
  { name: 'Laptop', onSale: true, stock: 15 },
  { name: 'Mouse', onSale: false, stock: 5 },     // Low stock
  { name: 'Keyboard', onSale: true, stock: 25 },  // On sale
  { name: 'Monitor', onSale: false, stock: 50 },
];

Solution:

const products = [
  { name: 'Laptop', onSale: true, stock: 15 },
  { name: 'Mouse', onSale: false, stock: 5 },
  { name: 'Keyboard', onSale: true, stock: 25 },
  { name: 'Monitor', onSale: false, stock: 50 },
];

const attentionNeeded = products.filter(product => {
  return product.onSale === true || product.stock < 10;
});

console.log(attentionNeeded);

Output:

[
  { name: 'Laptop', onSale: true, stock: 15 },
  { name: 'Mouse', onSale: false, stock: 5 },
  { name: 'Keyboard', onSale: true, stock: 25 }
]

Filtering with Dynamic Conditions​

Sometimes, you may not know the filter criteria in advance. In these cases, you can build a dynamic filter function.

You have an object representing a user's filter selections, and you need to apply all of its conditions to an array.

const products = [
  { name: 'Laptop', category: 'electronics', price: 1200 },
  { name: 'T-Shirt', category: 'apparel', price: 25 },
  { name: 'Keyboard', category: 'electronics', price: 75 },
];

// The user can provide any combination of filters
const filters = {
  category: 'electronics',
  price: 75,
};

Solution: use Object.keys() and the every() method to check that all filter conditions are met for each product.

const filteredProducts = products.filter(product => {
  // Use .every() to ensure all conditions in the filters object are true
  return Object.keys(filters).every(key => {
    return product[key] === filters[key];
  });
});

console.log(filteredProducts);

Output:

[ { name: 'Keyboard', category: 'electronics', price: 75 } ]

Conclusion​

The Array.prototype.filter() method is a powerful and declarative tool for extracting data from an array based on complex criteria.

  • To filter for elements that meet all conditions, use the logical AND (&&) operator inside the callback.
  • To filter for elements that meet at least one condition, use the logical OR (||) operator.
  • For dynamic filtering, you can iterate through a conditions object using Object.keys().every() to create a flexible and scalable solution.

By combining filter() with these logical operators, you can write clean, readable, and powerful data manipulation code.

Table of Contents