Latest Code Tutorials

Javascript Array Filter: How to Filter Array in JavaScript

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 Array Filter()

The array filter() is a built-in JavaScript 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.


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


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.


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 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.

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


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. 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 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.