Understanding filter() method in Javascript (with examples)

What is the filter() method in Javascript?

The filter() method in Javascript is used to create a new array consisting of elements from the original array that passes certain conditions. Basically, filter() method filters out elements in an array that does not meet the criteria specified in the callback function and retains the ones that pass.

Let’s say we have an array consisting of integers. We want to select only the even numbers from the array. In this case, we can filter out all the even numbers using the filter() method.

let numbers = [1, 2, 3, 4, 5, 6, 7];

let even = numbers.filter(function(i) {
    return i % 2 == 0;
});

console.log(even); // [2, 4, 6]

Similarly, if we want only the odd numbers then we can specify the condition accordingly.

let odd = numbers.filter(function(i) {
    return i % 2 != 0;
});

console.log(odd); // [1, 3, 5, 7]

Filter using multiple conditions

We are not restricted to specifying only one condition. If we have multiple conditions to filter out the elements in an array. For example, we have an array of ages and want to filter all the ages between 18 and 60 years.

let age = [13, 17, 23, 80, 88, 52, 67, 3, 19, 15];

let eligibleAges = age.filter(function(i) {
    return i >= 18 && i <= 60;
});

console.log(eligibleAges); // [23, 52, 19]

In this case, we have specified two conditions and the filter method will select all the ages that are greater than or equal to 18 and less than or equal to 60.

How to get index in the filter method?

To get the index in the filter() method, we need to specify the index parameter while calling the method. The first parameter is the element of the array and the second parameter holds the value of the index. For example,

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

let even = numbers.filter(function(value, index) {
    if(value % 2 == 0) {
        console.log(index);
        return value;
    }
});

console.log(even);

/*
OUTPUT:
1
3
5
7

[2, 4, 6, 8]
*/

Filter array of objects by value

Very often we may have a collection of objects that needs to be filtered out on certain criteria. The filter() method is very handy in such cases. For example, we have an array employees that contains objects with properties name, age and department.

If we want to filter all the employees working in marketing, we can do so easily using the filter() method.

const employees = [
    {
        name: 'Johnny',
        age: '25',
        department: 'accounting'
    },
    {
        name: 'Walker',
        age: '35',
        department: 'marketing'
    },
    {
        name: 'Bob',
        age: '53',
        department: 'developer'
    },
    {
        name: 'Harry',
        age: '43',
        department: 'marketing'
    }
];


let marketing = employees.filter(function(employee) {
    return employee.department == 'marketing';
});

console.log(marketing);

/* OUTPUT:
[{name: 'Walker', age: '35', department: 'marketing'},
    {name: 'Harry', age: '43', department: 'marketing'}]
*/

In this case, Walker and Harry work in marketing, hence both the objects get filtered.

We can also filter them using additional criteria like we are interested to know the employees working in the marketing department and are above the age of 40.

const employees = [
    {
        name: 'Johnny',
        age: '25',
        department: 'accounting'
    },
    {
        name: 'Walker',
        age: '35',
        department: 'marketing'
    },
    {
        name: 'Bob',
        age: '53',
        department: 'developer'
    },
    {
        name: 'Harry',
        age: '43',
        department: 'marketing'
    }
];


let marketing = employees.filter(function(employee) {
    return employee.department == 'marketing' && employee.age > 40;
});

console.log(marketing);

/* OUTPUT:
 [{name: 'Harry', age: '43', department: 'marketing'}]
*/