JavaScript Tutorials

JavaScript Array filter()
Syntax & Examples

Array.filter() method

The filter() method of the Array class in JavaScript returns a new array containing all elements of the calling array for which the provided filtering function returns true.

Syntax of Array.filter()

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

1.
filter(callbackFn)

Parameters

ParameterOptional/RequiredDescription
callbackFnrequiredA function to test each element in the array. It takes three arguments: element, index, and array.

This method returns a new array containing all elements of the calling array for which the provided filtering function returns true.

Returns value of type Array.

2.
filter(callbackFn, thisArg)

Parameters

ParameterOptional/RequiredDescription
callbackFnrequiredA function to test each element in the array. It takes three arguments: element, index, and array.
thisArgoptionalA value to use as this when executing callbackFn.

This method returns a new array containing all elements of the calling array for which the provided filtering function returns true, using thisArg as the value of this inside callbackFn.

Returns value of type Array.


✐ Examples

1 Using filter() method to filter even numbers

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

For example,

  1. We define an array variable arr with elements [1, 2, 3, 4, 5, 6].
  2. We define a callback function isEven to check if each element is an even number.
  3. We use the filter() method with isEven to create a new array with only even numbers.
  4. The result is stored in the variable evenNumbers.
  5. We log evenNumbers to the console using console.log() method to see the filtered array.

JavaScript Program

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

Output

[2, 4, 6]

2 Using filter() method to filter out strings with length greater than 3

We can use the filter() method to filter out strings with length greater than 3 from an array.

For example,

  1. We define an array variable strArr with elements ['apple', 'bat', 'cat', 'dog'].
  2. We define a callback function isLengthGreaterThanThree to check if the length of each string is greater than 3.
  3. We use the filter() method with isLengthGreaterThanThree to create a new array with strings of length greater than 3.
  4. The result is stored in the variable longStrings.
  5. We log longStrings to the console using console.log() method to see the filtered array.

JavaScript Program

const strArr = ['apple', 'bat', 'cat', 'dog'];
const isLengthGreaterThanThree = element => element.length > 3;
const longStrings = strArr.filter(isLengthGreaterThanThree);
console.log(longStrings);

Output

['apple']

3 Using filter() method with a thisArg

We can use the filter() method with a thisArg to filter elements in an array using a specific context.

For example,

  1. We define an array variable arr with elements [10, 20, 30, 40, 50].
  2. We define an object context with a threshold property set to 30.
  3. We define a callback function isGreaterThanThreshold to check if each element is greater than the threshold property of the context object.
  4. We use the filter() method with isGreaterThanThreshold and context as thisArg to create a new array with elements greater than the threshold.
  5. The result is stored in the variable filteredArr.
  6. We log filteredArr to the console using console.log() method to see the filtered array.

JavaScript Program

const arr = [10, 20, 30, 40, 50];
const context = { threshold: 30 };
function isGreaterThanThreshold(element) {
  return element > this.threshold;
}
const filteredArr = arr.filter(isGreaterThanThreshold, context);
console.log(filteredArr);

Output

[40, 50]

Summary

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