CODEWITHSUNDEEP
jqueryfilter
Royi Namir
Royi Namir

Reputation: 148524

Grep vs Filter in jQuery?

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 ?

Upvotes: 88

Views: 60807

Answers (5)

user669677
user669677

Reputation:

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.

Upvotes: 6

Pierre Bonhoure
Pierre Bonhoure

Reputation: 15

@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.

Upvotes: 0

Matas Vaitkevicius
Matas Vaitkevicius

Reputation: 61401

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>

Upvotes: 1

GillesC
GillesC

Reputation: 10874

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)

Upvotes: 20

omerkirk
omerkirk

Reputation: 2527

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.

Upvotes: 139

Related Questions