JavaScript filter() Method Explained

Meaning

JavaScript filter() method is a higher order function. That means it can take other function as an arguments and return a new function.

It may take upto 2 arguments where one is a callback which executes for each array element and second is optional thisArg object, The thisArg object is used to set the value of the this keyword inside the callback function.

Filter method does not modify the original array in fact, it returns a new array containing only the elements that passed the test.

Syntax

/* if you want to print the filtered values then you may not 
need ES6 feautes i.e. to store a function in variable */
originalArray.filter(function(){
    // statements or conditions or test 
})

/* If you want to use ES6 Arrow function then you can do so as well*/
originalArray.filter((args)=>{
    //statements or conditions or test
})

/* To store the filtered values in a variables */
let newArray = originalArray.filter( (value) => {
    return value // or anything
})

Examples

1 --> To print only that array elements which are divisible by 2 or even numbers

let arr = [1,2,3,4,5,6,7,8,9,10,11,12]
let arr2 = arr.filter( (a) => {
    return a % 2 == 0
})

console.log(arr2) // [2, 4, 6, 8, 10, 12]

2 --> To print only that objects who born after 1995

// for that we will create an array of objects
let arr = [
    { name : "C" , born : "1972" },
    { name : "C++" , born : "1980" },
    { name : "Java" , born : "1995" },
    { name : "JavaScript" , born : "1995" },
    { name : "PHP" , born : "1983" },
    { name : "Python" , born : "1991" },
    { name : "C#" , born : "2000" },
]    

let arr2 = arr.filter( (a) => {
    return a.born >= 1995
})

console.log(arr2)
/* output -> 

    {name: 'Java', born: '1995'}
    {name: 'JavaScript', born: '1995'}
    {name: 'C#', born: '2000'}

*/

Working of filter()

Wonder how is it working?

First make it clear that it does not modify original array. Done?

Alright then, moving ahead let's understand the anatomy of filter()

Homework Problem

1. Given an array of objects, containing name age and roll number . Return an array of objects that includes only those whose roll number is greater than 7.

2. Given an array of strings, containing 10 fruits name. Return an array of strings that contains only those fruits whose length is greater or equal to 4.

Don't be smart by adding 1 dozen banana. Every 10 fruits shall be unique

Good Luck with your questions and tell me your response to this question, if you encounter with an error or seems difficult first try to do it anyhow, build logic. If still unsolved, then feel free to reach me from any platform mentioned below.

Instagram

LinkedIn

I hope you have learned something new today. If yes, then follow me for more such valuable content.

Written By MOHIT SONI