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

Question

Many times I face the same problem: I want to filter an array with a simple condition e.g. check for non/equality, greater than, less than, contains...

My code looks like this:

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

It would by nice to have shortcuts to such a 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 how to do this in javascript? Does javascript have any built-in functions to support these simple comparisions?

Are you asking about performance or clean code? (I think that your way is the best in clean code but in performance the traditional for loop could be better). — caballerog
– caballerog, Commented Dec 20, 2015 at 19:00

Avaq · Accepted Answer · 2015-12-20 20:00:46Z

4

Madox, what you've stumbled upon is the concept of currying! And you'll be glad to hear that there is an entire JavaScript community built around that idea. With Ramda your code would look like:

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

And it works.

All Ramda provides, is a list of "curried helper functions" like the one you showed. If you'd rather curry your own helper functions, then you might want a curry helper function which reduces the boilerplate: var isGreaterThan = curry(function(a, b){ return a > b }). This curry function is provided by most utility libraries like Underscore, Lodash or Ramda.

edited Dec 20, 2015 at 20:00

answered Dec 20, 2015 at 19:46

Avaq

3,0211 gold badge24 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

madox2 Over a year ago

Thanks, I was exactly looking for helper functions like gte, eq, has, ... from the Ramda. But I am still not sure If I want to learn and use other library since ES6 has a lot of it's features.

Mulan Over a year ago

@madox2 once you start digging into the Rambda source code you'll start finding skeletons immediately.

Mulan · Accepted Answer · 2016-02-20 00:46:00Z

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

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

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

With ES6 arrow functions, this gets a lot easier.

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

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

Without further ado, let's see it work in a filter

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

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

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

And with that, you're at the doorstep of functional programming. There's a ton of fun stuff to learn. With the kind of problem we discussed here, I think you'd be interested in learning about function composition next.

Here's a basic composition to whet 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]

I am already familiar with ES6 and it's cool. Anyway, thanks for the tips!

leninhasda · Accepted Answer · 2015-12-20 19:32:33Z

-4

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

answered Dec 20, 2015 at 19:32

leninhasda

1,76012 silver badges21 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related