Hello world, nice to e-meet you again, in my previous post , I showed you how to use the array.map() method to manipulate or modify some items in the array.

In this post, we take a look at another JavaScript array method, the filter method. Let's get started.

What is the filter() method ?

The filter() method creates a new array filled with all array elements that passes a test (provided as a function)

What does it do ?

The filter() method returns an array containing elements of the parent array that matches the set test. A function containing a test is passed as an argument to the filter method. To keep an element the test function should return true and false to discard an element.

array.filter(someFunctionToTestFor)

The syntax for the arrray.filter() method is

// Arrow function
theArray.filter((element) => { ... } )

Just like the map()method , with the filter()method, you enter the the callback function as a parameter, The callback function is the function you need to provide to the array.filter() to test each element in the array

//callback function: this is the test to be executed on each item in the array.
(element)=> {...}   //for each element, do this task ....
//if the element passes the test, push it into a new Array

If the element being tested passes the test. It pushes the element into the new array.

As an analogy, see the filter method as a funnel with a filter paper, what you need stays on the filter paper and what you don't need should pass through the filter paper to be discarded.

How To Use The Array.filter() method

• Scenario 1: You have an array of ages and you only want to keep ages greater than or equal to 20. Let see how to achieve that

const ages = [31, 42, 5, 12, 5, 23]

// the test to be executed 
age => {return age >= 20}

//pass the function to be executed to the array.filter() method and store result to a new array
const agesGreaterThan20 = ages.filter(age => {return age >= 20})

console.log(agesGreaterThan20)

//  expected output
[31, 42, 23]

• Scenario 2: You have an array of objects and you want to pull out only a specific value. In this example, we want to pull out all the females from the userName array

const userNames = [{name: "Ama", gender: "female"}, {name: "Kojo", gender: "male"}, {name: "kofi", gender: "male"}, {name: "Abigail", gender: "female"}]
const females = userNames.filter(name => name.gender === 'female")
console.log(females)
//expected output

[{name: "Ama", gender: "female"}, {name:"Abigail", gender:"female"}]

If you want to get all the males in the userName array, you can achieve it by doing so

const userNames = [{name: "Ama", gender: "female"}, {name: "Kojo", gender: "male"}, {name: "kofi", gender: "male"}, {name: "Abigail", gender: "female"}]
const males = userNames.filter(name => name.gender === 'male")
console.log(males)
//expected output

[{name: "Kojo", gender: "male"}, {name:"Kofi", gender: 'male'}]

In Conclusion

To conclude, w hen you encounter a scenario where you have an array of items and you want to filter through to get a new array with only some of the items of the original array then, use the array.filter() method.

To achieve this purpose, you must provide the array filter method a function , which is basically the task to be executed or you want to test for, and if each element in the array passes the test, it will be stored in a new array.

Hope you got something from this post too, would love to read your comment. Check out my next post on the array.find() method.

Me daa se

PS: Me daa se means "Thank You" in twi, one of the most popular dialects in my country Ghana