The lodash _.filter, and Array.filter methods

It has been a few months sense the last time I wrote a post on lodash, as I have been trying to find other great things in the javaScript word to write about such as phaser, and three.js. However lodash is very popular, and content on it is very much in demand, so maybe I should get back into it for a while, make some new posts, and improve some old ones.

Looking over what I have on lodash so far I am surprised that I forgot to write one on _.filter method, also oddly enough I don’t have any post on the core js Array.filter equivalent as well. So for the heck of it why not write one on _.filter and how it compares to what is in javaScript by itself, as there are a lot of lodash methods that are like that.

Basic example of _.filter in lodash

To use the _.filter methods the first argument that you give it is a collection, such as an array of numbers. The second argument you give is an iteratee method, that can be your own method, or one of the lodash iteratee methods such as _.matches. Also some of those methods are built in, more on that later.

So for a basic example one might have a simple little demo in which I have an array of numbers that are negative and positive, and I use _.filter to create a new array that is only the positive numbers in that array.

Something like this:

1
2
3
4
5
6
7
8
9
10
// basic example
console.log(
_.filter([4,-1,7,7,-3,-5,1], function(val){
return val > 0;
})
); // [4, 7, 7, 1]

Array.filter vs _.filter

The vanilla js Array.filter method can be used in a similar fashion, without the need for lodash. When it comes to something simple, that can work just fine. Also the browser support for Array.filter is pretty good these days, it’s only real old versions of IE that come to mind that present a concern if there is actually a far amount of visitors that still use those platforms. Also if in a node.js environment there is no need for lodash at all if this just happens to be the only method that you are using.

Yet again maybe not, like many of these methods in lodash there are a few things to them that set them apart. So maybe one can rationalize the use of _.filter these days even when we often have the native alternative to play with in javaScript itself.

_.filter is a collection method, not an array method

So _.filter is one of the many collection methods in lodash, meaning they are made with both arrays, and objects in general in mind. So if I want to I can just use an Object with _.filter, and it does not even have to be an array like Object.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var obj = {
foo: 'bar',
bool: false,
n: 42,
c: 7
};
var numbers = _.filter(obj, function (val, key, obj) {
return typeof val === 'number';
});
console.log(numbers); // [42,7];

When trying to use an array method with a plan old object that was not an instance of Array using call, it will typically only work if it is array like. Or in other words it is an object that has keys that are numbers from zero upwards, and a length property that reflects the count of those keys.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Vanilla js Array.filter will not just work on any object
var numbers = [].filter.call(obj, function(val,key,obj){
return typeof val === 'number';
});
console.log(numbers); // [];
// but it will work on 'array like' objects
var numbers = [].filter.call({
0 : 'foo',
1: 'man',
2: 7,
length: 3
}, function(val,key,obj){
return typeof val === 'number';
});
console.log(numbers); // [7]