While working with the arrays sometimes we need to filter the array based on the condition. Most of the beginners in the web development still follow the traditional for loop and then apply a condition to filter the array. But In JavaScript, arrays have lots of handy and useful methods which makes the developer’s life so easy. JavaScript filter method is one of them.

In this article, we are going to learn about the JavaScript filter method. We will learn how to use the filter method of the JavaScript into the code so that code looks like written by a professional developer. The Best way of using the JS filter and when to use it into the code.

JavaScript filter() Method Description

It is a JavaScript Array function which filters the data according to the conditions provided in the callback function. JavaScript filter method accepts the callback function and in that callback function, we run the condition on each element of the array and then return a new filtered array.

In short, the filter() method of the JavaScript return a new array with all elements which pass the condition by the callback function.

JavaScript filter() Method Syntax

let filteredArray = arr.filter(callback(element[, index[, array]])[, thisArg])

callback

The function used to each element of the arr. It returns true if condition is match and keep the elements otherwise false. The callback function of js filter method accepts three arguments.

Let’s understand them.

element

The current element of the array.

index

The current index of the array. This is the optional argument of the callback function of the JS filter method.

array

The array filter was called upon.

thisArg

Value to use as this when executing callback. This is the optional filed in the filter method.

JavaScript filter() Method Return Value

A new array with the elements which pass the condition. If there is no element in the array means no element pass the condition.

JavaScript filter() Method Examples

Till now, we learned lots of the theory. So now lets see this awesome JavaScript Array method into action using the some examples.

Before moving further in the article, make sure you have a good understanding of the JavaScript ES6 and how to use the arrow function in the JavaScript.

Filter an array of numbers which returns only even numbers

In this example, we will learn how to use the filter method in the simple array. Here we have an array which contains numbers from 1 to 10 and then by using the the JavaScript array filter method we extract only even numbers.

const numbers = [1,2,3,4,5,6,7,8,9,10];

const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers);

//output
[2, 4, 6, 8, 10]

Filtering an array of object in Javascript

Suppose, you have an array of object which contains the data about the employees. From this data you need to extract only whose employees whose salary is greater than a specific number. Then you can do this very easily using the JavaScript Filter() method.

const employees = [
        { name: 'Joe', salary: '12000'},
        { name: 'Dave', salary: '15000'},
        { name: 'Rohit', salary: '15000'},
        { name: 'Grace', salary: '12000'},
        { name: 'Sachin', salary: '25000'},
        { name: 'Leo', salary: '20000'}
    ];

const filteredArr = employees.filter(employee => employee.salary > 15000);

console.log(filteredArr);

//output

{name: "Sachin", salary: "25000"}
{name: "Leo", salary: "20000"}

When to Use the JS filter method

If you need to run any specific condition on the each element of an Array and get only those data who satisfy the condition then you should use the filter method of the JavaScript Array.

Conclusion

This is all about the JavaScript filter method. Hope, you get a good understanding on this. Here, I present only two examples but you can try it with others examples with more use cases.

If you want to learn more about JavaScript in more fun ways then you can join a course from Codecademy on JavaScript.

Hope this article helps you a lot to understand the map() function. If you have any doubt or suggestion then comment in the comment box.

Pin It