Grep vs Filter in jQuery?

Question

I was wondering about the differences between Grep and Filter :

Filter :

Reduce the set of matched elements to those that match the selector or pass the function's test.

Grep :

Finds the elements of an array which satisfy a filter function. The original array is not affected.

ok.

so if I do this in GREP :

var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];

myNewArray= jQuery.grep(arr, function(n, i){
  return (n != 5 && i > 4);
});

I could do also :

 var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];

myNewArray= $(arr).filter( function(n, i){
  return (n != 5 && i > 4);
});

In both situations I still can access to the original array...

so...where is the difference ?

I think `.grep()` is a helper method for general array processing, while `.filter()` is typically used for narrowing down element selections. I don't think `.grep()` returns a jQuery object, and you can't chain it (`jQuery.fn.grep` does not exist). — Felix Kling, Apr 13 '12 at 11:34
`$(arr).filter` <- this is unnecesary, do `arr.filter` instead. — Mahn, Jun 18 '14 at 14:18

score 139 · Accepted Answer · answered Apr 13 '12 at 11:51

139

They both function in similar ways however they differ in their usages.

The filter function is intended to be used with html elements, and that is why it is a chainable function that returns a jQuery object and it accepts filters like ":even", ":odd" or ":visible" etc. You can't do that with the grep function, which is intended to be a utility function for arrays.

answered Apr 13 '12 at 11:51

omerkirk

2,527
1
17
9

1

Just wanted to highlight that .filter() doesn't work in IE, so better to use $.grep() in case your app supports all browsers. – vohrahul Aug 16 '18 at 09:13
3

tested and found that currently .filter() works in IE as well as Microsoft Edge. – Umesh K. Aug 29 '18 at 11:01

score 20 · Answer 2 · edited Jul 02 '14 at 10:46

20

Filter is part of jQuery.fn so it's aim is to be used with selector $('div').filter where grep is a jQuery tool method (jQuery.grep)

edited Jul 02 '14 at 10:46

answered Apr 13 '12 at 11:37

GillesC

10,647
3
40
55

True, the normal usage of filter is to pass a selector string. You can also pass a filter function, although the arguments (index, item) are opposite of the native filter function (item, index). Also, grep seems to be very similar to the native array filter function. I suspect that the advantage of grep for jquery is compatibility with older browsers... – Bryan Matthews Mar 14 '13 at 15:41

score 6 · Answer 3 · edited Sep 08 '17 at 09:23

6

The difference in its usage:

Filter:

$(selector).filter(selector/function)

Grep:

$.grep(array,function,invert)

So in your case I would rather use grep() because using array this way is unnecessary: $(arr).

I also suppose that grep function is faster, because it only accepts arrays.

edited Sep 08 '17 at 09:23

jasonscript

6,039
3
28
43

answered Jul 02 '14 at 11:00

score 1 · Answer 4 · answered Oct 10 '16 at 08:13

To those that are interested on how grep performs against filter I wrote this test:

TLDR; Grep is many times faster.

Script I used for testing:

function test(){
var array = [];
for(var i = 0; i<1000000; i++)
{
array.push(i);
}

var filterResult = []
for (var i = 0; i < 1000; i++){
var stime = new Date();
var filter = array.filter(o => o == 99999);
filterResult.push(new Date() - stime);
}

var grepResult = [];
var stime = new Date();
var grep = $.grep(array,function(i,o){
return o == 99999;
});
grepResult.push(new Date() - stime);

$('p').text('average filter - '+(filterResult.reduce((pv,cv)=>{ return pv +cv},0)/1000))
$('div').text('average grep - '+(grepResult.reduce((pv,cv)=>{ return pv + cv},0)/1000))
}
test();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p></p>
<div></div>

Pierre Bonhoure · Answer 5 · 2017-03-13T10:24:19.187

@Matas Vaitkevicius, the code snippet posted presents errors, here is a corrected one:

function test(){
var array = [];
for(var i = 0; i<1000000; i++)
{
    array.push(i);
}

var filterResult = []
for (var i = 0; i < 1000; i++){
    var stime = new Date();
    var filter = array.filter(o => o == 99999);
    filterResult.push(new Date() - stime);
}

var grepResult = [];
for (var i = 0; i < 1000; i++){
    var stime = new Date();
    var grep = $.grep(array,function(i,o){
        return o == 99999;
    });
    grepResult.push(new Date() - stime);
}

$('p').text('average filter - '+(filterResult.reduce((pv,cv)=>{ return pv +cv},0)/1000))
$('div').text('average grep - '+(grepResult.reduce((pv,cv)=>{ return pv + cv},0)/1000))
}
test();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p></p>
<div></div>

TLDR : In firefox, filter is slightly faster, in chrome, that's the opposite. Regarding performances only, you can use anyone.

Grep vs Filter in jQuery?

5 Answers5

Linked