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 ?

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.

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)

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.

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>

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