DEV Community

loading...
Cover image for DAY 2 of building the Higher Order Functions in javascript. the filter Higher Order Function.

DAY 2 of building the Higher Order Functions in javascript. the filter Higher Order Function.

Emmanuel Onah
Frontend Architect
Updated on ・1 min read

Hello community,

So today we will be implementing the filter HOF.

//filter function
/******************
*@_filter prototype is an array prototype that returns a new array from the prepended array(or better still the object)  that met the condition
*@_filter prototype takes in a callback function
*@callback arguments:the iterated-value,the iterated-  index,the prepended array itself
*@author Emmanuel Onah
******************/

Array.prototype._filter = function(callback){
   const newArray = [];

   for(let i = 0; i < this.length;i++){
       const fullfilledValue = callback(this[i],i,this);
       if(fullfilledValue){
          newArray.push(this[i]);
    }
} 
 return newArray;
}
const names= ["Jerry","Joe","Jude","SashaBlanca"];
//testing 1
const newArray1 =    names._filter((name,nameIndex,arr)=>name.length===3);
console.log(newArray1);


//testing 2
const newArray2 = names._filter((name,nameIndex,arr)=>name.includes("Sa"));
console.log(newArray2);

//testing 3
const newArray3 = names._filter((name,nameIndex,arr)=>name.length <=5);
console.log(newArray3);
Enter fullscreen mode Exit fullscreen mode

Alt Text

Day 1: the map array prototype
Day 3: the find array prototype
Day 4: The reduce prototype

Discussion (4)

Collapse
xtofl profile image
xtofl

I always wondered why one would force the client code to receive the results as an array.

I wonder if it's not better to inject what has to be done with the filtered elements:


names._filter(name => name.length > 5, name => console.log);

var newArray = [];
names._filter(name => name.length > 5, e => newArray.push(e));
...
Enter fullscreen mode Exit fullscreen mode
Collapse
emmanuelonah profile image
Emmanuel Onah Author

Sincerely, I see no reason you wouldn't return a new array to the user, that's the use-case of filter(to filter and return new collection).

Mind you, the injection you assumed above is returning a new array also.

Coming down to your code, I think this is better and readable(don't forget overusing concepts is not the primary aim of programming but rather simplicity to your code-readers like they are reading a book authored by you):

names._filter(name => name.length > 5);

Thank you.

Collapse
xtofl profile image
xtofl

In e.g. python, haskell, c#, ..., filter is conceived as a larger concept, applicable to all iterable objects.

That's why I prefer to stay more generic. It's a design goal you can choose for.

For small arrays, it's ok to return an array.

Thread Thread
emmanuelonah profile image
Emmanuel Onah Author

I really can't say about its usecase for other languages outside Javascript. But then in the context of javascript, i will give you a good example where you can best use it on the web. For example, when trying to handle a client side searching/sorting.... then rather than imperatively handling such operation its better to use the "filter prototype"(a declarative approach) because then the performance which you worry about is already considered by javascript to some extent.