TypeScript Array filter()
Syntax & Examples

Array.filter() method

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

Syntax of Array.filter()

There are 2 variations for the syntax of Array.filter() method. They are:

1.
filter<S>(callbackfn: (value: T, index: number, array: T[]) => value is S, thisArg?: any): S[]

Parameters

ParameterOptional/RequiredDescription
callbackfnrequiredA function that tests each element of the array. Return true to keep the element, false otherwise. It accepts three arguments: value, index, and array.
thisArgoptionalValue to use as this when executing callbackfn.

This method creates a new array with elements that pass the test implemented by the provided callback function. If the callback returns true, the element is included in the new array.

Returns value of type Array.

2.
filter(callbackfn: (value: T, index: number, array: T[]) => unknown, thisArg?: any): T[]

Parameters

ParameterOptional/RequiredDescription
callbackfnrequiredA function that tests each element of the array. Return true to keep the element, false otherwise. It accepts three arguments: value, index, and array.
thisArgoptionalValue to use as this when executing callbackfn.

This method creates a new array with elements that pass the test implemented by the provided callback function. If the callback returns true, the element is included in the new array.

Returns value of type Array.


✐ Examples

1 Using filter() to filter out even numbers

In TypeScript, you can use the filter() method to filter out even numbers from an array.

For example,

  1. Define an array arr with some initial values.
  2. Use the filter() method with a callback function that checks if a number is even.
  3. Store the result in the variable evenNumbers.
  4. Log evenNumbers to the console using the console.log() method.

TypeScript Program

const arr = [1, 2, 3, 4, 5, 6];
const evenNumbers = arr.filter(num => num % 2 === 0);
console.log(evenNumbers);

Output

[2, 4, 6]

2 Using filter() to filter out words with more than three letters

In TypeScript, you can use the filter() method to filter out words with more than three letters from an array.

For example,

  1. Define an array words with some initial values.
  2. Use the filter() method with a callback function that checks if the length of a word is greater than three.
  3. Store the result in the variable longWords.
  4. Log longWords to the console using the console.log() method.

TypeScript Program

const words = ['cat', 'dog', 'elephant', 'rat'];
const longWords = words.filter(word => word.length > 3);
console.log(longWords);

Output

['elephant']

3 Using filter() to filter out objects based on a property

In TypeScript, you can use the filter() method to filter out objects from an array based on a specific property.

For example,

  1. Define an array people with some initial objects.
  2. Use the filter() method with a callback function that checks if the age property of each object is greater than 18.
  3. Store the result in the variable adults.
  4. Log adults to the console using the console.log() method.

TypeScript Program

const people = [
  { name: 'John', age: 17 },
  { name: 'Jane', age: 20 },
  { name: 'Jim', age: 16 },
  { name: 'Jake', age: 22 }
];
const adults = people.filter(person => person.age > 18);
console.log(adults);

Output

[{ name: 'Jane', age: 20 }, { name: 'Jake', age: 22 }]

Summary

In this TypeScript tutorial, we learned about filter() method of Array: the syntax and few working examples with output and detailed explanation for each example.