How to Use the Array filter() method in JavaScript

The filter() method filters an array according to provided criteria, returning a new array containing the filtered items.

The Array object’s filter() method is an iteration method which enables us to retrieve all of an array’s elements that correlate to a provided criteria when the function is called. This method is included in the Array.prototype property, which was introduced in ECMAScript 5 (ES5), and is supported in all modern browsers.

Basic filter() usage example

The following example demonstrates how to use filter() to retrieve all of the even numbers from a given array:

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNums = nums.filter(num => num % 2 === 0);
console.log(evenNums); //Expected output: [2, 4, 6, 8, 10]

(This example uses shorthand syntax, an example using the complete syntax is included below)

In the above example, const nums is an array containing the numbers 1 thru 10.

const evenNums applies the filter() method to nums array. The criteria uses the modulo operator (%) to find the remainder of an element of the array when it is divided by 2. If this is equal to 0, then the number is even, and we use the comparison operator (=== strict equality) to convert this to a Boolean value.

The output of this method is a new array containing only the even numbers from the input array.

Syntax

The syntax of the filter() method is straightforward. The method accepts a callback function that takes the currentValue, index, and the array operated upon as arguments, and returns a new array as output. The prototype for this function is as follows:

Array.filter(function callback(currentValue, index, array), this.Arg)

Let’s explore this with an example. Consider the following code:

const sales = [3.84, 3.98, 3.78, 3.79, 3.85, 3.93];
const recentSales = sales.filter(function getRecent(sale, Idx) {
    if (Idx > 3) return sale
})
console.log(recentSales); // Expected output: [3.85, 3.93]

Given this function above, let’s break it apart into its components from the filter() prototype:

• The callback function in this code is getRecent.
• The currentValue is each sale in the parent array (sales). The array entries are provided in order, with each element being sent to getRecent in the parameter sale.
• Idx simply receives the index in the parent array of the current item that is being processed.
• The final argument, array, is the array we are looping through. This argument is rarely used.

Note: manipulating this.Arg allows the this context to be changed.

Note: Only the callback function and currentValue parameters are required – the remaining parameters are optional!

The callback function can take the form of an anonymous function, or even that of an arrow function (as shown in the first example above).

Related Articles

JavaScript – How to Use The Array map() Method

JavaScript – How to Use The Array forEach() Method

JavaScript – How to Use Asynchronous Functions