TypeScript Array Filter with Multiple Conditions

In TypeScript, as in JavaScript, the filter() method creates a new array from an existing array, containing only elements that match certain criteria. When you want to filter an array based on multiple conditions, you can combine these conditions using logical operators such as && (AND) and || (OR). In this Typescript tutorial, I will show you how to use the filter() method with multiple conditions in TypeScript.

TypeScript Array Filter with Multiple Conditions

The filter() method in TypeScript is used on arrays to create a new array that contains only the elements that pass the test implemented by the provided function. Here’s the basic syntax:

let newArray: ArrayType[] = array.filter(element => {
  return condition;
});

To filter a Typescript array with multiple conditions, you can add conditions together within the callback function using && for a logical AND or || for a logical OR.

Now, let us see a few examples:

1. Use Logical AND (&&)

When you use &&, each condition must be true for the element to be included in the new array in Typescript.

Here is an example:

interface Product {
  id: number;
  name: string;
  price: number;
  category: string;
}

let products: Product[] = [
  { id: 1, name: 'Laptop', price: 1000, category: 'Electronics' },
  { id: 2, name: 'Shirt', price: 50, category: 'Apparel' },
  { id: 3, name: 'Smartphone', price: 700, category: 'Electronics' },
  { id: 4, name: 'Pan', price: 30, category: 'Kitchenware' },
];

// Filter products with price greater than 100 and in the 'Electronics' category
let filteredProducts: Product[] = products.filter(product => {
  return product.price > 100 && product.category === 'Electronics';
});

console.log(filteredProducts);

You can see the output after I executed the code using VS code, and it gave the output in the screenshot below.

[
  { id: 1, name: 'Laptop', price: 1000, category: 'Electronics' },
  { id: 3, name: 'Smartphone', price: 700, category: 'Electronics' }
]
TypeScript Array Filter with Multiple Conditions

2. Use Logical OR (||)

When you use ||, the element is included in the new array if at least one of the conditions is true in Typescript.

interface Product {
  id: number;
  name: string;
  price: number;
  category: string;
}

let products: Product[] = [
  { id: 1, name: 'Laptop', price: 1000, category: 'Electronics' },
  { id: 2, name: 'Shirt', price: 50, category: 'Apparel' },
  { id: 3, name: 'Smartphone', price: 700, category: 'Electronics' },
  { id: 4, name: 'Pan', price: 30, category: 'Kitchenware' },
];

// Filter products with price less than 100 or in the 'Kitchenware' category
let filteredProductsOr: Product[] = products.filter(product => {
  return product.price < 100 || product.category === 'Kitchenware';
});

console.log(filteredProductsOr);

Here, you can see an example of a TypeScript Array Filter with Multiple Conditions using logical or. You can see the output after I executed the code using VS code.

[
  { id: 2, name: 'Shirt', price: 50, category: 'Apparel' },
  { id: 4, name: 'Pan', price: 30, category: 'Kitchenware' }
]
TypeScript Array Filter with Multiple Conditions using logical or

3. Use Both Logical AND and Logical OR

Here is another example where I have used both logical AND and logic OR in filtering an array in Typescript.

interface Product {
  id: number;
  name: string;
  price: number;
  category: string;
}

let products: Product[] = [
  { id: 1, name: 'Laptop', price: 1000, category: 'Electronics' },
  { id: 2, name: 'Shirt', price: 50, category: 'Apparel' },
  { id: 3, name: 'Smartphone', price: 700, category: 'Electronics' },
  { id: 4, name: 'Pan', price: 30, category: 'Kitchenware' },
];

// Filter products in 'Electronics' or 'Kitchenware' category and price less than 800
let complexFilter: Product[] = products.filter(product => {
  return (product.category === 'Electronics' || product.category === 'Kitchenware') && product.price < 800;
});

console.log(complexFilter);

You can see the output in the screenshot below:

[
  { id: 3, name: 'Smartphone', price: 700, category: 'Electronics' },
  { id: 4, name: 'Pan', price: 30, category: 'Kitchenware' }
]
TypeScript Array Filter with Multiple Conditions examples

This is how to filter a Typescript array with multiple conditions.

See also  How to compare two strings in typescript

I have explained how to use the logical AND and OR conditions while filtering an array with multiple conditions in Typescript.

You may also like:

>