How to Filter an Array in JavaScript ?

Filtering an array in JavaScript involves selecting elements based on certain criteria. The selected elements form a new array. This operation is integral to tasks such as data manipulation, data processing, and displaying filtered results. The function tests each element in the array and includes it in the filtered array if it meets the criteria, otherwise it is excluded.

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

Table of Content

Using the filter() method
Using a for loop
Using the reduce() 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 ]

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 ]

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 ]

1. Using the filter() method

Parameters:

2. Using a for loop

3. Using the reduce() method

Contact Us