JavaScript Array.filter() Method

Usage — The JavaScript Array.filter() method is used to create a new array with all elements that pass the test implemented by the provided function.

It has the following syntax:

JavaScript

arr.filter(callback[, thisArg])

Here is an example of using Array.filter():

JavaScript

const names = ["Sophia", "Jacob", "Isabella", "Mason", "Emma", "William", "Olivia"];
let longNames = names.filter(name => name.length > 5);

// Output — ["Sophia", "Isabella", "William", "Olivia"]
console.log(longNames);

Return Value — This method returns a new array with all the elements of original array that passed your test.

Additional Information — The Array.filter() method calls the given callback function once for each element in an array, and constructs a new array of all the values for which callback returns a value that coerces to true. Array elements which do not pass the callback test are simply skipped, and are not included in the new array.

You should remember that filter() does not mutate the array on which it is called. Also, the range of elements processed by filter() is set before the first invocation of callback. Elements which are appended to the array after the call to filter() begins will not be visited by callback. If existing elements of the array are changed, or deleted, their value as passed to callback will be the value at the time filter() visits them. In other words, elements that are deleted are not visited.

Browser Support — The Array.filter() method is available in Chrome, Edge, Firefox 1.5+, Internet Explorer 9+, Opera and Safari.

Go Directly To — usage, parameters or working examples.

Parameters

callback

The callback parameter is used to specify a function which will be used to test each element of the array. The callback function should return true to keep the element and false otherwise. It is a required parameter and takes three arguments.

  • element — The element parameter is used to specify the current element that is being processed by the callback function.
  • index — The index parameter is used to specify the index of the current element being processed in the array.
  • array — The array parameter is used to specify array on which the Array.filter() method was called.

thisArg

The thisArg parameter is used to specify the value which should be used as this when executing the callback function. This is an optional parameter.

Working Examples

Here are some examples of using the Array.filter() method:

JavaScript

function isOdd(value) {
  return value%2;
}
var onlyOdd = [12, 5, 83, 130, 44, 97].filter(isOdd);

// Output — [5, 83, 97]
console.log(onlyOdd);

In the following example, we are filtering array items based on the search string. If any array element (or fruit name) contains a particular string, it will be filtered out by us.

JavaScript

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

function filterFruits(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}

// Output — ['apple', 'grapes']
console.log(filterFruits('ap'));

// Output — ['banana', 'mango', 'orange']
console.log(filterFruits('an'));

Further Reading

  1. You can read more about the JavaScript Array.filter() method on MDN.
  2. You can also take a look at the defeinition of JavaScript Array.filter() method in the ECMAScript 2015 specification.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top