The JavaScript Array.filter() method is used to create a new array containing elements that pass a test provided by a callback function. This method does not modify the original array but instead returns a new array with the elements that satisfy the condition. If no elements pass the test, an empty array is returned.

For example, array.filter(callback) can be used to filter out specific elements from an array based on a given condition, such as retrieving all elements greater than a certain number.

Syntax

The syntax for the Array.filter() method is given below:

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

Parameters

The Array.filter() method accepts two parameters:

• callback (Required): A function that is called for each element in the array. It takes the following arguments:
  • element: The current element being processed.
  • index (Optional): The index of the current element.
  • array (Optional): The array being traversed.
• The callback should return true to keep the element and false to exclude it from the new array.
• thisArg (Optional): Value to use as this when executing the callback. If not provided, undefined is used.

Return Value

A new array containing all elements that pass the test implemented by the provided function. If no elements pass the test, an empty array is returned.

Examples of JavaScript Array.filter() Method

Example 1: Filtering Out Numbers Greater Than a Given Value

You can use the filter() method to return only the elements that meet a specified condition.

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

Explanation: In this example, the filter() method returns a new array with numbers greater than 10 from the numbers array.

Example 2: Filtering Even Numbers

You can use the filter() method to retrieve only even numbers from an array.

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

Explanation: The filter() method checks each element to see if it is divisible by 2, and returns a new array containing only the even numbers.

Example 3: Filtering Objects Based on a Property

The filter() method is often used with arrays of objects to filter elements based on a specific property.

const users = [
 { name: 'Alice', age: 25 },
 { name: 'Bob', age: 35 },
 { name: 'Charlie', age: 30 }
];
const result = users.filter(user => user.age > 30);
console.log(result);  
// Output: [{ name: 'Bob', age: 35 }]

Explanation: The filter() method returns a new array containing only the objects where the age property is greater than 30. In this case, only Bob meets the condition.

Example 4: Filtering with Index and Array Parameters

You can access both the index and the array as additional parameters in the callback function.

const numbers = [10, 20, 30, 40, 50];
const result = numbers.filter((num, index) => index % 2 === 0);
console.log(result);  // Output: [10, 30, 50]

Explanation: The filter() method filters the array based on the element’s index. In this example, it returns elements that are located at even indexes.

Example 5: Filtering Using thisArg

You can use the thisArg parameter to provide a custom this context inside the callback function.

const threshold = {
 min: 15
};
const numbers = [5, 12, 18, 25, 30];
const result = numbers.filter(function(num) {
 return num > this.min;
}, threshold);
console.log(result);  // Output: [18, 25, 30]

Explanation: The thisArg parameter is used to set the this value to the threshold object. The filter() method then filters out numbers that are greater than the min property of the threshold object.

Example 6: Filtering an Empty Array

If the filter() method is used on an empty array, it will always return an empty array.

const emptyArray = [];
const result = emptyArray.filter(num => num > 10);
console.log(result);  // Output: []

Explanation: Since the array is empty, there are no elements to filter, and the filter() method returns an empty array.