TypeScript Array filter()

In this chapter, we will explore the filter() method for arrays in TypeScript. This method is a built-in function that creates a new array with all elements that pass the test implemented by the provided function. Understanding how to use filter() is useful for extracting subsets of arrays based on specific conditions.

Table of Contents

1. Definition
2. Syntax
3. Examples
4. Conclusion

1. Definition

The filter() method creates a new array with all elements that pass the test implemented by the provided function. It does not modify the original array.

2. Syntax

array.filter(callback(element, index, array), thisArg?);

Parameters

• callback: A function to test each element, taking three arguments:
  • element: The current element being processed in the array.
  • index (optional): The index of the current element being processed in the array.
  • array (optional): The array filter was called upon.
• thisArg (optional): Value to use as this when executing callback.

Return Value

The method returns a new array with the elements that pass the test. If no elements pass the test, an empty array will be returned.

3. Examples

Let's look at some examples to understand how filter() works in TypeScript.

Example 1: Basic Usage

In this example, we filter an array to get all elements greater than 10.

let numbers: number[] = [5, 12, 8, 130, 44];
let result = numbers.filter((num) => num > 10);
console.log(result); // Output: [12, 130, 44]

Example 2: Filtering Even Numbers

In this example, we filter an array to get all even numbers.

let numbers: number[] = [1, 2, 3, 4, 5, 6, 7, 8];
let result = numbers.filter((num) => num % 2 === 0);
console.log(result); // Output: [2, 4, 6, 8]

Example 3: Using Index and Array in Callback

In this example, we use the index and the array itself within the callback function to filter elements.

let numbers: number[] = [1, 3, 5, 7, 9];
let result = numbers.filter((num, index, arr) => {
  console.log(`Element: ${num}, Index: ${index}, Array: ${arr}`);
  return num > 4;
});
console.log(result); // Output: [5, 7, 9]
// Console will also log each element, index, and array.

Example 4: Filtering an Array of Objects

In this example, we filter an array of objects based on a specific property value.

interface Person {
  name: string;
  age: number;
}

let people: Person[] = [
  { name: "Ravi", age: 25 },
  { name: "Ankit", age: 30 },
  { name: "Priya", age: 28 },
  { name: "John", age: 20 },
];

let result = people.filter((person) => person.age >= 25);
console.log(result);
// Output:
// [ { name: 'Ravi', age: 25 },
// { name: 'Ankit', age: 30 },
// { name: 'Priya', age: 28 } ]

Example 5: Filtering Strings in an Array

In this example, we filter an array to get all strings that contain the letter 'a'.

let fruits: string[] = ["apple", "banana", "grape", "mango", "kiwi"];
let result = fruits.filter((fruit) => fruit.includes("a"));
console.log(result); // Output: ['apple', 'banana', 'grape', 'mango']

4. Conclusion

In this chapter, we explored the filter() method for arrays in TypeScript, which is used to create a new array with all elements that pass the test implemented by the provided function. We covered its definition, syntax, parameters, return value, and provided several examples to demonstrate its usage. Understanding how to use filter() effectively can help in various array manipulation tasks in TypeScript, especially when extracting subsets of arrays based on specific conditions.