AppDividend
Latest Code Tutorials

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

0

Javascript Array Filter Example | Array.prototype.filter() Tutorial is today’s topic.  The filter() method 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. The filter() does not execute the function for array elements without any values. The filter() method is a pure function and does not change the original array instead it will return a new array which satisfies the requirement of the provided function in the argument.

If you want to learn more about the latest Javascript tutorials then check out this The Complete Javascript Course 2018.

Javascript Array Filter Example

The filter method takes an argument as a function, and that function run on every element of an array and return the values which coerce the value true. Array elements which do not pass the callback test are merely skipped and are not included in the new array.

The syntax of Javascript Array Filter Method

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 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 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 the string which has the substring ‘al.’ So it will return an array consisting of that items.

Searching in an array using a filter() method

 

The filter() method is introduced on 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, Javascript Array Filter Example | Array.prototype.filter() Tutorial is over.

Leave A Reply

Your email address will not be published.

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