$.map Vs. $.grep in jQuery

The difference is that the grep() method filters an array and returns the filtered array, while map() method applies a function to each item in the array, thus returning a modified array.

jQuery map() method

The map() function translates a set of elements in the jQuery object into another set of values in a jQuery array which may, or may not contain elements.

var items = [10,20,30,10]; var items = $.map(items, function(item) { if (item == 10) return null; return item; });

In the above code will return 20 and 30.

Browser View

Full Source

<!DOCTYPE html> <html lang="en"> <head> <title>jQuery map() method</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('button').click(function() { var items = [10,20,30,10]; alert(items); var items = $.map(items, function(item) { if (item == 10) return null; return item; }); alert(items); }); }); </script> </head> <body> <button>Try it</button> </body> </htm>

jQuery grep() method

The jQuery grep() method is used to filter the contents of an array.

var items = [10,20,30,10]; var items = $.grep(items, function(item) { return item != '10'; });

In the above code willreturn 20 and 30.

Browser View

Full Source

<!DOCTYPE html> <html lang="en"> <head> <title>jQuery grep() method</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('button').click(function() { var items = [10,20,30,10]; alert(items); var items = $.grep(items, function(item) { return item != '10'; }); alert(items); }); }); </script> </head> <body> <button>Try it</button> </body> </html>

So, we can see here the difference is grep() method filters an array and returns the filtered array, while map() method applies a function to each item in the array, thus returning a modified array.

Next : What is the use of serialize method in jQuery

Related Topics