How to Filter an Array in JavaScript ?

Filtering an array in JavaScript involves selecting elements from an array that satisfies certain criteria and creating a new array containing only those elements. This function tests each element in the array and returns true if the element should be included in the filtered array, or false otherwise.

This operation is commonly used in JavaScript programming for tasks such as data manipulation, data processing, and displaying filtered results to users.

Using the filter() method

The filter() method is a built-in function for arrays in JavaScript that creates a new array with all elements that pass the test implemented by the provided callback function. It iterates over each element of the array and applies the callback function to each element. If the callback function returns true for an element, that element is included in the new array; otherwise, it is excluded.

Syntax:

const newArray = originalArray.filter(callbackFunction(element[, index[, array]])[, thisArg]);

Parameters:

• callbackFunction: A function to test each element of the array. It takes three arguments:
• element: The current element being processed in the array.
• index (Optional): The index of the current element being processed in the array.
• array (Optional): The array filter() was called upon.
• thisArg (Optional): Value to use as this when executing the callback.

Example : To demonstrate filtering the array elements in JavaScript using filter() method.

JavaScript

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers
    .filter(number => number % 2 === 0);

console.log(evenNumbers);

Output

[ 2, 4 ]

Using a for loop

This approach involves manually iterating over each element of the array using a for loop. Within the loop, each element is individually checked against a condition. If the condition evaluates to true, the element is added to a new array.

Syntax:

const newArray = [];
for (let i = 0; i < originalArray.length; i++) {
  if (condition) {
    newArray.push(originalArray[i]);
  }
}

Example: To demonstrate filtering the even number from the array using for loop

JavaScript

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = [];

for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) {
        evenNumbers
            .push(numbers[i]);
    }
}

console.log(evenNumbers); 

Output

[ 2, 4 ]

Using the reduce() method

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value. In this approach, the reduce() method is utilized to iterate over the array and build a new array based on certain conditions.

Syntax:

const newArray = originalArray.reduce((accumulator, currentValue[, index[, array]]) => {
  // Your condition here
  return accumulator;
}, initialValue);

Example: To demonstrate filtering the even number from the array using reduce method in JavaScript.

JavaScript

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers
    .reduce((accumulator, currentValue) => {
        if (currentValue % 2 === 0) {
            accumulator
                .push(currentValue);
        }
        return accumulator;
    }, []);

console.log(evenNumbers);

Output

[ 2, 4 ]