How to Filter an Array in JavaScript ?

The array.filter() method is used to filter array in JavaScript. The filter() method iterates and check every element for the given condition and returns a new array with the filtered output.

Syntax

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

Note: It is an in-built JavaScript method to filter an array.

// Given array
const a = [ 1, 2, 3, 4, 5, 6];

// Filter the even numbers
const a1 = a.filter( number => number % 2 === 0);

// Display output
console.log("Filtered Array:", a1);

Filtered Array: [ 2, 4, 6 ]

Please Read JavaScript Array Tutorial for complete understanding of JavaScript Array.

Using for Loop

The for loop iterates and repeatedly execute the given code until the condition is false. We can add the condition filter element in each iteration and use the array.push() to create new array of filtered values.

// Given array
const a = [ 1, 2, 3, 4, 5, 6];

// Initialize empty array to store the results
const a1 = []
 
for( let i = 0; i < a.length ; i++){
    if( a[i] % 2 === 0 ) // Condition for even number
    	a1.push(a[i]);   // Push element to new array
}

// Display output
console.log("Filtered Array:", a1)

Filtered Array: [ 2, 4, 6 ]

Using array.reduce() Method

The array.reduce() method executes a reducer function (that you will provide) on each element of the array, resulting in a single output value.

Syntax

array.reduce( 
    function( acc , currentValue, currentIndex, arr), 
    initialValue  
)

// Given array
const a = [ 1, 2, 3, 4, 5, 6];

// Filter the even numbers
const a1 = a.reduce((acc, number) => {
    if (number % 2 === 0) {
        acc.push(number); // Only push the number if it is even
    }
    return acc;
}, []); // Initialize acc as an empty array

// Display output
console.log("Filtered Array:", a1);

Filtered Array: [ 2, 4, 6 ]