Filter an Array with Multiple Conditions in JavaScript

Filtering an array with multiple conditions in JavaScript is a common task, and you can achieve it using the filter method in combination with logical operators. Here’s a step-by-step guide on how to do this:

Basic Example#

Suppose you have an array of objects, and you want to filter out objects that meet multiple criteria. For example, let’s say you have an array of people and you want to filter out people who are older than 30 and live in “New York”.

const people = [
    { name: "Alice", age: 25, city: "New York" },
    { name: "Bob", age: 35, city: "New York" },
    { name: "Charlie", age: 30, city: "San Francisco" },
    { name: "David", age: 40, city: "New York" },
];

const filteredPeople = people.filter(
    (person) => person.age > 30 && person.city === "New York"
);

console.log(filteredPeople);

Explanation#

1. Array: people is an array of objects.
2. filter Method: filter creates a new array with all elements that pass the test implemented by the provided function.
3. Callback Function: The callback function inside filter receives each element of the array (in this case, person), and we use logical operators (&& for AND, || for OR) to combine conditions.
4. Conditions: person.age > 30 and person.city === 'New York' are the conditions used to filter the array.

More Complex Conditions#

You can use other logical operators and more complex conditions as needed. Here’s an example with || (OR) and ! (NOT) operators:

const items = [
    { name: "Laptop", price: 1000, inStock: true },
    { name: "Phone", price: 500, inStock: false },
    { name: "Tablet", price: 300, inStock: true },
    { name: "Monitor", price: 200, inStock: true },
];

const filteredItems = items.filter((item) => item.price < 600 || !item.inStock);

console.log(filteredItems);

Explanation#

1. Array: items is an array of objects.
2. Conditions:
   • item.price < 600: Selects items with a price less than $600.
   • !item.inStock: Selects items that are not in stock.
   • || (OR) combines these conditions, so it selects items that meet either condition.

Nested Conditions#

If you need to use nested conditions or combine multiple arrays, you can do so like this:

const products = [
    { name: "Smartwatch", category: "Electronics", price: 150 },
    { name: "Shoes", category: "Clothing", price: 60 },
    { name: "Headphones", category: "Electronics", price: 80 },
    { name: "T-shirt", category: "Clothing", price: 20 },
];

const filteredProducts = products.filter(
    (product) =>
        (product.category === "Electronics" && product.price < 100) ||
        (product.category === "Clothing" && product.price < 50)
);

console.log(filteredProducts);

Explanation#

1. Array: products is an array of objects with category and price.
2. Conditions:
   • For Electronics: product.category === 'Electronics' && product.price < 100.
   • For Clothing: product.category === 'Clothing' && product.price < 50.
   • || (OR) combines these conditions, so the result includes products from either category that meet their respective price conditions.

By leveraging the filter method along with logical operators, you can efficiently handle multiple conditions to filter your arrays according to various criteria.