AppDividend
Latest Code Tutorials

Javascript Array Filter: How to Filter Array in JavaScript

1

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. Array elements that do not pass the callback test are merely skipped and are 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 Array Filter()

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

Syntax

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

Parameters

The item argument is the reference to 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 to the new array.

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

Let us take a simple example.

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;
  });
}

console.log(filterValues());

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 consisting of only those elements from the given array which satisfy a condition set by the argument function.

The filter() function is very useful 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.

Javascript Filter 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;
});

console.log(newData);

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

Javascript Array Filter Example

Searching in an array using a filter() method

Write the following code which demonstrates 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;
    });
}

console.log(filterValues('al'));

So we are searching for the string which has the substring ‘al.’ So 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. If you need to use it in older browsers, then you will need to use a compatibility shim or the equivalent filter method in the library like Underscore or lodash.

Finally, the Javascript Array filter() example is over.

1 Comment
  1. Amit Parmar says

    thanks for the guide

Leave A Reply

Your email address will not be published.

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