As a learner of web development, you might have constantly came across a term " high order functions". So what exactly a high order function is?

in simplest term -

a higher-order function is a function that takes another function as an argument and let it do the processing and give back an output.

So in this post, I have described how to use a filter() as an array helper method instead of using the traditional for loop.

• filter() method

this method gives us a new array on the basis of the elements that have passed a certain condition(as you can see in the below code snippet, the condition of the item being greater than 4). Remember I said returns a new array, it does not mutates( alter or changes) the original array.

now let us have a look at the syntax

const numbers=[ 2,4,6,8]
var data=numbers.filter(function(item){
  return item >4;
})
console.log(data)

Let us decipher this code snippet.

here we have a simple array of numbers. We are using the filter method on this array, the filter method takes a callback function as an argument. Inside that callback function, we provide our condition(i.e item >4) that eventually evaluates to either true or false.

In this case, it will return false for the first two elements i.e 2 and 4 as 2 they do not pass the test condition and for the rest of the elements, the condition will be evaluated to true.

It returns us a new array based on the test condition.

So in this case, it will check for all the elements- one by one (with the help of iterator function) inside our number array and see if that particular element passes the test condition or not.

If it does, then that element will be returned to the new array and at the end of the operation, we get the new array with the elements.

easy peasy, ain't it?

Now let us try filter with a bit complex usecase. So in this example let us say we have a user john. John scrolls to his favourite shopping website and tries to filter some products for grooming.

in that case, let us see how the filter method comes in handy for the developer. note: you must have knowledge about objects and ways to access them in order to understand this use case😊

const products=[
{product:"shirt", type:"wear"},
{product:"jeans", type:"wear"},
{product:"beardOil", type:"grooming"},
{product:"mobile", type:"electronics"},
{product:"shoes", type:"footWear"},
{product:"hairspray", type:"grooming"}


]
var filteredProduct=products.filter(function(product){
return product.type==="grooming"
})
console.log(filteredProduct);

here we are dealing with an array of objects that serves as our products container. Now if we want our user to filter products based on his choice, we can use our higher-order function " filter()" for that purpose.

let us walk through the code.

here we have an array of objects.

we are calling filter() on products array, which takes in a function as an argument. Now inside this function, we are passing our test condition. Remember, the filter works on the basis of test conditions.

The function takes in a reference - product with the help of which we can access the properties of our object.

Test condition- here we are checking if the product.type has a value of " grooming".

If it evaluates to true it will return us a new array with all the elements that pass the test condition.

Now you might be wondering, hey what if none of the elements passes the test condition. This question popped up in my mind too. let change the type "grooming" with something else, so that our test condition does not evaluate to true

const products=[
{product:"shirt", type:"wear"},
{product:"jeans", type:"wear"},
{product:"beardOil", type:"NO IDEA"},
{product:"mobile", type:"electronics"},
{product:"shoes", type:"footWear"},
{product:"hairspray", type:"NO IDEA"}


]
var filteredProduct=products.filter(function(product){
return product.type==="grooming"
})
console.log("none of the element passed the test condition!",filteredProduct);

so in that case, we will get an empty array

If liked the article, do give your feedback and also try all the code snippets by yourselves.