The filter() method in JavaScript creates a new array containing all the elements of the original array that pass a test implemented by a provided callback function. It is a powerful tool for selecting elements based on specific criteria.

Syntax:

let newArray = array.filter(callback(currentValue, index, array), thisArg)

• callback: A function that is called for each element in the array. It can accept up to three parameters:

  • currentValue: 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 upon.

• thisArg (optional): A value to use as this when executing the callback function.

Return Value:

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

Key Points:

• Does not modify the original array: The filter() method creates a new array and does not change the original array.
• Works with all array elements: It processes each element in the order they appear in the array.
• Returns a new array: Only includes elements that satisfy the condition defined in the callback function.

Example 1: Basic usage

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;  // Keep only even numbers
});

console.log(evenNumbers);  // [2, 4]
console.log(numbers);       // [1, 2, 3, 4, 5] (original array unchanged)

Example 2: Using arrow function

let fruits = ['apple', 'banana', 'orange', 'kiwi'];
let longFruits = fruits.filter(fruit => fruit.length > 5);

console.log(longFruits);  // ['banana', 'orange']

Example 3: Using index and array parameters

let numbers = [10, 15, 20, 25];
let results = numbers.filter(function(number, index) {
  return number > 15 && index % 2 === 0;  // Keep numbers greater than 15 at even indices
});

console.log(results);  // [20] (only 20 is greater than 15 and at an even index)

Example 4: Chaining with other array methods

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let filteredResults = numbers
  .filter(number => number > 5)   // Keep only numbers greater than 5
  .map(number => number * 2);      // Double the remaining numbers

console.log(filteredResults);  // [12, 14, 16, 18] (only the numbers greater than 5 are doubled)

Example 5: Using thisArg

let threshold = {
  min: 3
};

let numbers = [1, 2, 3, 4, 5];
let aboveThreshold = numbers.filter(function(number) {
  return number > this.min;  // Keep numbers greater than the threshold
}, threshold);

console.log(aboveThreshold);  // [4, 5]

Summary:

• The filter() method is a powerful way to create a new array containing only those elements that meet specific criteria.
• It allows for clean, readable code and supports functional programming patterns in JavaScript.
• Since filter() returns a new array, it is useful for data selection and manipulation while preserving the original array.