What is the best way to create simple filter functions in javascript?

Question

I encounter the same problem many times: I want to filter an array with a simple condition, for example. check for / equality, more, less, contains ...

My code is as follows:

var result = [1, 2, 3, 4].filter(function(i) { return i > 2; }); console.log(result); // [3, 4] 

It would be nice to have shortcuts for such simple operations, so I created some helper functions:

 function isGreaterThan(value) { return function(original) { return value < original; } } [1, 2, 3, 4].filter(isGreaterThan(2)); // [3, 4] 

or

 function isGreaterThan(value, original) { return value < original; } [1, 2, 3, 4].filter(isGreaterThan.bind(null, 2)); // [3, 4] 

Is there a better way to do this in javascript? Does javascript have built-in functions to support these simple comparisons?

Answer 1

Madox, you stumbled upon the concept of currying ! And you'll be glad to hear that there is an entire JavaScript community based on this idea. With Ramda, your code will look like this:

 var filterSmallNumbers = filter(gte(3)); var smallNumbers = filterSmallNumbers([1,2,3,4,5,6]); 

And it works .

Everything Ramda has to offer is a list of "curry helper functions" like the one you showed. If you prefer to use your own helper functions, you may need a curry helper function that reduces the pattern: var isGreaterThan = curry(function(a, b){ return a > b }) . This curry feature is provided by most utility libraries such as Underscore, Lodash, or Ramda.

Answer 2

I will expand on @Avaq's answer a bit here. You don't need lib like Rambda to start using currying. You can start doing this with ES6 today.

It seems you already understood the concept here. This is already a curry function. (Each sequenced function takes only one argument)

 function isGreaterThan(value) { return function(original) { return value < original; } } 

With the ES6 arrow function, this is much easier.

 const gt = x => y => y > x; 

Notice how you turned the > operator on < in your function to make use more natural? It is very common with curried functions to first take an operand that is least likely to change. With gt I think it’s better to use > here, as this is the name of our function, but flip the operands instead. That's why you see me returning y > x instead of x > y . gt(5) returns the function y => y > 5 , which is very natural for me.

Without further ado, see if this works in filter

 [1,2,3,4,5,6].filter(gt(3)); //=> [4,5,6] 

If you need this to work in the ES5 environment, you can easily pass it to babel . The result should look very familiar.

 "use strict"; var gt = function gt(x) { return function (y) { return y > x; }; }; 

---

And with this you are on the verge of functional programming. There are many interesting things to learn. With the problem that we discussed here, I think it will be interesting for you to learn about the structure of functions below.

Here is the basic composition to increase your appetite

 // filter out odd numbers const mod = x => y => y % x; const eq = x => y => y === x; const comp = f => g => x => f(g(x)); const isEven = comp (eq (0)) (mod (2)); [1,2,3,4,5,6].filter(isEven); //=> [2,4,6] 

Answer 3

you were almost there, here is the correct one:

 var original = 2; function isGreaterThan(value) { return value > original; } var result = [1, 2, 3, 4].filter(isGreaterThan); // result is [3, 4] 

reference