JQuery Utility Functions - grep()

JQuery's documentation can be a little light sometimes. Today we're looking at an underused core JQuery  function: $.grep()

First, the weird name. If you're not a Linux nerd, you should know that grep is a command in Linux that essentially searches, or more specifically, filters, stuff you pass to it. I would've preferred they call this command .filter() or .where(), but so be it.

As you've likely inferred, grep filters an array or collection of tags. It's like the WHERE clause from SQL or .Where(x => x...) in .NET's LINQ.

I'm going to send you straight to the fiddle for the code:

$.grep() example over an array

And of course, you can use it over a collection of tags - but the syntax is strange. For example, if you want to get a collection of input tags on the page where the user typed at least 10 characters:

var inputs = $.grep($('input[type=text]'), function(input) {
    return input.value.length > 9;
});

What's odd about this is it breaks convention with the rest of the JQuery collection methods. For example, you can set the text color to red for all tags selected with:

$('div').css('color', 'red');

So you would expect this to work:

$('div').grep(...

But it does not, even in the most recent version (as of this posting, 1.6.2). Instead you have to use .filter().

So now with the previous blog post on $.map(), we can get a little fancy. Suppose we've got a bunch of address objects from the server of the format:

var addresses = [
  {
    name: 'Brass Nine Design',
    address1: '321 Sesame St',
    city: 'Sesame',
    state: 'MA'
  }, ...
];

Suppose the user is going to enter a string, and you need to search names and addresses against it, then show the user the companies that match - listed by name. Remember that map is essentially SQL's select, and grep is essentially SQL's where. First you filter the list with grep, then extract the fields you wanted with map:

var matchingNames = $.map($.grep(addresses, function(addr) {
  return addr.name.indexOf(phrase) >= 0 || addr.address1.indexOf(phrase) >= 0;
}), function(addr) {
  return addr.name;
});

Voila.

JQuery Utility Functions - $.map()

A lot of devs use JQuery nowadays without realizing how many little utilities are sitting inside of it. You can save yourself some coding time, and a fair number of bytes, if you understand what's underneath the hood. You might even get better performance given the optimizations that have been made to these core functions. Top of mind are:

.data()
.grep()
.map()
http://api.jquery.com/category/utilities/

You might begin by asking, "Why don't I just get rid of these? I don't use them." Unfortunately they're core to how JQuery works, so if you use a little bit of it, these are coming along. May as well learn them.

Let's do .map() today.

.map() is basically a translation function for collections. You pass in an array and a function, and the function is used to translate the array into another array. If you've used .NET's LINQ before, .map() is the .Select(x => x...) of Javascript.

As a simple example, suppose you have an array of objects you received from the server:

var people = [
  { name: 'Joe', city: 'Amherst', ... },
  { name: 'Sarah', city: ... },
  ...
];

Now suppose you wanted to just get a list of names in the data. The obvious way is to loop through it, either with for(var i = 0...), or if you want to get fancy, $.each(), but either way it's about the same number of bytes for the user. Here's the $.each() code:

var names = [];
$.each(people, function() {
  names.push(this.name);
});

And of course you'll end up with something that looks like
var names = ['Joe', 'Sarah', ...];

Let's see it in .map()!

var names = $.map(people, function(person) {
  return person.name;
});

And you end up with the same result. When this gets minified, it's easily the byte-winner. It's also likely that browsers will continue to offer more fast aggregation built-in functions - as they do, .map() is likely to adopt them, and you get performance gains for free.

Here's a JSFiddle with the 3 approaches, if you want to experiment:
http://jsfiddle.net/XdWVx/

In a sense, $.map() is $.each() for when you know you're building a new array from the thing you're looping through. As you might guess, you can use this on collections of tags. So for example if you wanted to rapidly gather the elements of a form into an array of values:

var values = $('input[type=text]').map(function(input) {
  return input.value;
});

It's important to notice a troublesome jQuery inconsistency here. $.each() iterating over a list calls back to a function that takes 2 arguments, the index of the array and the value at that index. $.map() calls back to a function with just the one argument, and no index - those who value consistency may writhe at this.

This inconsistency worsens when you loop over an object. In this case, $.map's callback now takes 2 arguments, the property name and its value - but they're reversed from their order used in $.each():

http://jsfiddle.net/b9chris/MGvp3/

Since a lot of legacy code likely depends on this lack of consistency in jQuery, the only clean answer is likely a small library that sits on top of it that rights the ship and cleans up the mess. Something tells me I'm not the first OCD developer to notice this - perhaps it's already out there. Links to libraries on github or other places that solve this problem are welcome in the comments.

Happy mapping.