jQuery.map - Practical uses for the function?

Question

I am trying to get a better understanding of the jQuery.map function.

So in general terms .map takes a array and "maps" it to another array of items.

easy example:

$.map([0,1,2], function(n){     return n+4; }); 

results in [4,5,6]

I think I understand what it does. I want to under why would someone need it. What is the practical use of this function? How are you using this in your code?

Answer 1

Mapping has two main purposes: grabbing properties from an array of items, and converting each item into something else.

Suppose you have an array of objects representing users:

var users = [   { id: 1, name: "RedWolves" },   { id: 2, name: "Ron DeVera" },   { id: 3, name: "Jon Skeet" } ]; 

Mapping is a convenient way to grab a certain property from each item. For instance, you can convert it into an array of user IDs:

var userIds = $.map(users, function(u) { return u.id; }); 

As another example, say you have a collection of elements:

var ths = $('table tr th'); 

If you want to store the contents of those table headers for later use, you can get an array of their HTML contents:

var contents = $.map(ths, function(th) { return th.html(); }); 

Answer 2

$.map is all about converting items in a set.

As far as the DOM, I often use it to quickly pluck out values from my elements:

var usernames = $('#user-list li label').map(function() {     return this.innerHTML; }) 

The above converts the <label> elements inside a list of users to just the text contained therein. Then I can do:

alert('The following users are still logged in: ' + usernames.join(', '));