JavaScript filter: The Complete Guide

JavaScript filter() method takes an argument as a function, and that function runs on every element of an array and returns the values which coerce the value true. Thus, array elements that do not pass the callback test are skipped and not included in the new array.

The filter() method is a pure function and does not change the original array; instead, it will return a new array that satisfies the requirement of the provided function in the argument.

JavaScript filter

The array filter() is a built-in JavaScript function that creates a new array with all elements that pass a test implemented by a provided function. The filter() method creates an array with all array elements that go through the supplied function. Javascript filter() does not execute the function for array elements without any values.


let newArray = array.filter(function(item) {
  return condition;


The item argument references the current element in an array as the filter() checks it against the condition. It is beneficial for accessing properties in the case of objects.

If the current item passes the condition, it puts it in the new array.

In addition to an individual array element, the callback also has access to the current element’s index and the full array.


Write the following code in an app.js file.

// app.js

const numbers = [1, 3, 4, 6, 8, 9];

const filterValues = () => {
  return numbers.filter(number => {
      return number % 2 == 0;


Save the file and run the file.

node app

Javascript Array Filter Example | Array.prototype.filter() Tutorial

So, it will return an array whose values are even. The filter() function’s primary use is to create a new array from the given array (not modifying the existing array) that consists of only those elements from the given array which satisfy a condition set by the argument function.

The filter() function is handy in the Redux application, where you do not need to modify the existing state. Instead, you need to get the new state from the old state. So it is a pure function.

Example 2

Let us write the following code inside the app.js file and see the output.

const data = [
        country: 'China',
        population: 1409517397,
        country: 'India',
        population: 1339180127,
        country: 'USA',
        population: 324459463,
        country: 'Indonesia',
        population: 263991379,

let newData = data.filter(item => {
    return item.population < 300000000;


So, here we are fetching the country’s details whose population is less than 300Mn.

Javascript Array Filter Example

Searching in an array using a filter() method

Write the following code, demonstrating that we can search for any item inside an array.

// app.js

const students = ['krunal', 'ankit', 'appdividend', 'nehal', 'dhaval'];

const filterValues = (name) => {
    return students.filter(data => {
        return data.toLowerCase().indexOf(name.toLowerCase()) > -1;


So we are searching for the string with the substring ‘al.’ It will return an array consisting of those items.

Searching in an array using a filter() method

The filter() method is introduced on the ECMAScript 5 specification, so it isn’t available in older browsers like IE8. So, if you need to use it in older browsers, you will need to use a compatibility shim or the equivalent filter method in the library like Underscore or lodash.

That’s it for this tutorial.

1 thought on “JavaScript filter: The Complete Guide”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.