JavaScript Array filter() Method

The Array.filter() method is a powerful and widely used JavaScript function that creates a new array containing all the elements from the original array that satisfy a given condition. It does not modify the original array but returns a new one with the filtered elements.

Syntax

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

Parameters

Parameter	Description
callback	(Required) A function that tests each element of the array. Elements that pass the test are included in the new array.
element	(Required) The current element being processed in the array.
index	(Optional) The index of the current element being processed.
array	(Optional) The array filter() was called on.
thisArg	(Optional) A value to use as this when executing the callback function. Defaults to undefined.

Return Value

The filter() method returns a new array containing all elements that satisfy the condition implemented by the callback function. If no elements satisfy the condition, it returns an empty array.

Example 1: Filtering Numbers

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

Example 2: Filtering Strings

The filter() method selects strings with more than 5 characters.

let arr = ['apple', 'banana', 'cherry', 'date'];
let filteredArr = arr.filter(item => item.length > 5);
console.log(filteredArr); 
// Output: ['banana', 'cherry']

Example 3: Filtering Objects in an Array

This example filters out users who are not active.

let users = [
    { id: 1, name: 'John', isActive: true },
    { id: 2, name: 'Alice', isActive: false },
    { id: 3, name: 'Bob', isActive: true }
];

let activeUsers = users.filter(user => user.isActive);
console.log(activeUsers); 
/* Output: [
    { id: 1, name: 'John', isActive: true }, 
    { id: 3, name: 'Bob', isActive: true }
]

Example 4: Filtering with Index

The filter() method includes elements at even indices in the new array.

let numbers = [10, 20, 30, 40, 50];

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

Example 5: Filtering with thisArg

The thisArg parameter allows you to bind a custom context to the callback function.

let context = { threshold: 15 };

let numbers = [10, 20, 30, 40];

let greaterThanThreshold = numbers.filter(function(num) {
  return num > this.threshold;
}, context);

console.log(greaterThanThreshold); 
// Output: [20, 30, 40]

Example 6: Filtering an Empty Array

When called on an empty array, filter() returns an empty array.

let emptyArray = [];

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

Supported Browsers

Browser	Support
Chrome	1+
Firefox	1.5+
Safari	3+
Edge	12+
Opera	10.5+
Internet Explorer	9+

Note:

• Large Arrays: For very large arrays, the execution time of the callback function can impact performance.
• Chaining: Works well when chained with other methods like map() and reduce() for complex data transformations.