In this article written by Adam Boduch, author of the book Lo-Dash Essentials, we'll be looking at all the interesting things we can do with Lo-Dash and the map/reduce programming model. We'll start off with the basics, getting our feet wet with some basic mappings and basic reductions. As we progress through the article, we'll start introducing more advanced techniques to think in terms of map/reduce with Lo-Dash.
The goal, once you've reached the end of this article, is to have a solid understanding of the Lo-Dash functions available that aid in mapping and reducing collections. Additionally, you'll start to notice how disparate Lo-Dash functions work together in the map/reduce domain. Ready?
(For more resources related to this topic, see here.)
Plucking values
Consider that as your informal introduction to mapping because that's essentially what it's doing. It's taking an input collection and mapping it to a new collection, plucking only the properties we're interested in. This is shown in the following example:
var collection = [
{ name: 'Virginia', age: 45 },
{ name: 'Debra', age: 34 },
{ name: 'Jerry', age: 55 },
{ name: 'Earl', age: 29 }
];
_.pluck(collection, 'age');
// → [ 45, 34, 55, 29 ]
This is about as simple a mapping operation as you'll find. In fact, you can do the same thing with map():
var collection = [
{ name: 'Michele', age: 58 },
{ name: 'Lynda', age: 23 },
{ name: 'William', age: 35 },
{ name: 'Thomas', age: 41 }
];
_.map(collection, 'name');
// →
// [
// "Michele",
// "Lynda",
// "William",
// "Thomas"
// ]
As you'd expect, the output here is exactly the same as it would be with pluck(). In fact, pluck() is actually using the map() function under the hood. The callback passed to map() is constructed using property(), which just returns the specified property value. The map() function falls back to this plucking behavior when a string instead of a function is passed to it.
With that brief introduction to the nature of mapping, let's dig a little deeper and see what's possible in mapping collections.
Mapping collections
In this section, we'll explore mapping collections. Mapping one collection to another ranges from composing really simple—as we saw in the preceding section—to sophisticated callbacks. These callbacks that map each item in the collection can include or exclude properties and can calculate new values. Besides, we can apply functions to these items. We'll also address the issue of filtering collections and how this can be done in conjunction with mapping.
Including and excluding properties
When applied to an object, the pick() function generates a new object containing only the specified properties. The opposite of this function, omit(), generates an object with every property except those specified. Since these functions work fine for individual object instances, why not use them in a collection? You can use both of these functions to shed properties from collections by mapping them to new ones, as shown in the following code:
var collection = [
{ first: 'Ryan', last: 'Coleman', age: 23 },
{ first: 'Ann', last: 'Sutton', age: 31 },
{ first: 'Van', last: 'Holloway', age: 44 },
{ first: 'Francis', last: 'Higgins', age: 38 }
];
_.map(collection, function(item) {
return _.pick(item, [ 'first', 'last' ]);
});
// →
// [
// { first: "Ryan", last: "Coleman" },
// { first: "Ann", last: "Sutton" },
// { first: "Van", last: "Holloway" },
// { first: "Francis", last: "Higgins" }
// ]
Here, we're creating a new collection using the map() function. The callback function supplied to map() is applied to each item in the collection. The item argument is the original item from the collection. The callback is expected to return the mapped version of that item and this version could be anything, including the original item itself.
Be careful when manipulating the original item in map() callbacks. If the item is an object and it's referenced elsewhere in your application, it could have unintended consequences.
We're returning a new object as the mapped item in the preceding code. This is done using the pick() function. We only care about the first and the last properties. Our newly mapped collection looks identical to the original, except that no item has an age property. This newly mapped collection is seen in the following code:
var collection = [
{ first: 'Clinton', last: 'Park', age: 19 },
{ first: 'Dana', last: 'Hines', age: 36 },
{ first: 'Pete', last: 'Ross', age: 31 },
{ first: 'Annie', last: 'Cross', age: 48 }
];
_.map(collection, function(item) {
return _.omit(item, 'first');
});
// →
// [
// { last: "Park", age: 19 },
// { last: "Hines", age: 36 },
// { last: "Ross", age: 31 },
// { last: "Cross", age: 48 }
// ]
The preceding code follows the same approach as the pick() code. The only difference is that we're excluding the first property from the newly created collection. You'll also notice that we're passing a string containing a single property name instead of an array of property names.
In addition to passing strings or arrays as the argument to pick() or omit(), we can pass in a function callback. This is suitable when it's not very clear which objects in a collection should have which properties. Using a callback like this inside a map() callback lets us perform detailed comparisons and transformations on collections while using very little code:
function invalidAge(value, key) {
return key === 'age' && value < 40;
}
var collection = [
{ first: 'Kim', last: 'Lawson', age: 40 },
{ first: 'Marcia', last: 'Butler', age: 31 },
{ first: 'Shawna', last: 'Hamilton', age: 39 },
{ first: 'Leon', last: 'Johnston', age: 67 }
];
_.map(collection, function(item) {
return _.omit(item, invalidAge);
});
// →
// [
// { first: "Kim", last: "Lawson", age: 40 },
// { first: "Marcia", last: "Butler" },
// { first: "Shawna", last: "Hamilton" },
// { first: "Leon", last: "Johnston", age: 67 }
// ]
The new collection generated by this code excludes the age property for items where the age value is less than 40. The callback supplied to omit() is applied to each key-value pair in the object. This code is a good illustration of the conciseness achievable with Lo-Dash. There's a lot of iterative code running here and there is no for or while statement in sight.
Performing calculations
It's time now to turn our attention to performing calculations in our map() callbacks. This entails looking at the item and, based on its current state, computing a new value that will be ultimately mapped to the new collection. This could mean extending the original item's properties or replacing one with a newly computed value. Whichever the case, it's a lot easier to map these computations than to write your own logic that applies these functions to every item in your collection. This is explained using the following example:
var collection = [
{ name: 'Valerie', jqueryYears: 4, cssYears: 3 },
{ name: 'Alonzo', jqueryYears: 1, cssYears: 5 },
{ name: 'Claire', jqueryYears: 3, cssYears: 1 },
{ name: 'Duane', jqueryYears: 2, cssYears: 0 }
];
_.map(collection, function(item) {
return _.extend({
experience: item.jqueryYears + item.cssYears,
specialty: item.jqueryYears >= item.cssYears ?
'jQuery' : 'CSS'
}, item);
});
// →
// [
// {
// experience": 7,
// specialty": "jQuery",
// name": "Valerie",
// jqueryYears": 4,
// cssYears: 3
// },
// {
// experience: 6,
// specialty: "CSS",
// name: "Alonzo",
// jqueryYears: 1,
// cssYears: 5
// },
// {
// experience: 4,
// specialty: "jQuery",
// name: "Claire",
// jqueryYears: 3,
// cssYears: 1
// },
// {
// experience: 2,
// specialty: "jQuery",
// name: "Duane",
// jqueryYears: 2,
// cssYears: 0
// }
// ]
Here, we're mapping each item in the original collection to an extended version of it. Particularly, we're computing two new values for each item—experience and speciality. The experience property is simply the sum of the jqueryYears and cssYears properties. The speciality property is computed based on the larger value of the jqueryYears and cssYears properties.
Earlier, I mentioned the need to be careful when modifying items in map() callbacks. In general, it's a bad idea. It's helpful to try and remember that map() is used to generate new collections, not to modify existing collections. Here's an illustration of the horrific consequences of not being careful:
var app = {},
collection = [
{ name: 'Cameron', supervisor: false },
{ name: 'Lindsey', supervisor: true },
{ name: 'Kenneth', supervisor: false },
{ name: 'Caroline', supervisor: true }
];
app.supervisor = _.find(collection, { supervisor: true });
_.map(collection, function(item) {
return _.extend(item, { supervisor: false });
});
console.log(app.supervisor);
// → { name: "Lindsey", supervisor: false }
The destructive nature of this callback is not obvious at all and next to impossible for programmers to track down and diagnose. Its nature is essentially resetting the supervisor attribute for each item. If these items are used anywhere else in the application, the supervisor property value will be clobbered whenever this map job is executed. If you need to reset values like this, ensure that the change is mapped to the new value and not made to the original.
Mapping also works with primitive values as the item. Often, we'll have an array of primitive values that we'd like transformed into an alternative representation. For example, let's say you have an array of sizes, expressed in bytes. You can map those arrays to a new collection with those sizes expressed as human-readable values, using the following code:
function bytes(b) {
var units = [ 'B', 'K', 'M', 'G', 'T', 'P' ],
target = 0;
while (b >= 1024) {
b = b / 1024;
target++;
}
return (b % 1 === 0 ? b : b.toFixed(1)) +
units[target] + (target === 0 ? '' : 'B');
}
var collection = [
1024,
1048576,
345198,
120120120
];
_.map(collection, bytes);
// → [ "1KB", "1MB", "337.1KB", "114.6MB" ]
The bytes() function takes a numerical argument, which is the number of bytes to be formatted. This is the starting unit. We just keep incrementing the target unit until we have something that is less than 1024. For example, the last item in our collection maps to '114.6MB'. The bytes() function can be passed directly to map() since it's expecting values in our collection as they are.
Calling functions
We don't always have to write our own callback functions for map(). Wherever it makes sense, we're free to leverage Lo-Dash functions to map our collection items. For example, let's say we have a collection and we'd like to know the size of each item. There's a size() Lo-Dash function we can use as our map() callback, as follows:
var collection = [
[ 1, 2 ],
[ 1, 2, 3 ],
{ first: 1, second: 2 },
{ first: 1, second: 2, third: 3 }
];
_.map(collection, _.size);
// → [ 2, 3, 2, 3 ]
This code has the added benefit that the size() function returns consistent results, no matter what kind of argument is passed to it. In fact, any function that takes a single argument and returns a new value based on that argument is a valid candidate for a map() callback. For instance, we could also map the minimum and maximum value of each item:
var source = _.range(1000),
collection = [
_.sample(source, 50),
_.sample(source, 100),
_.sample(source, 150)
];
_.map(collection, _.min);
// → [ 20, 21, 1 ]
_.map(collection, _.max);
// → [ 931, 985, 991 ]
What if we want to map each item of our collection to a sorted version? Since we do not sort the collection itself, we don't care about the item positions within the collection, but the items themselves, if they're arrays, for instance. Let's see what happens with the following code:
var collection = [
[ 'Evan', 'Veronica', 'Dana' ],
[ 'Lila', 'Ronald', 'Dwayne' ],
[ 'Ivan', 'Alfred', 'Doug' ],
[ 'Penny', 'Lynne', 'Andy' ]
];
_.map(collection, _.compose(_.first, function(item) {
return _.sortBy(item);
}));
// → [ "Dana", "Dwayne", "Alfred", "Andy" ]
This code uses the compose() function to construct a map() callback. The first function returns the sorted version of the item by passing it to sortBy(). The first() item of this sorted list is then returned as the mapped item. The end result is a new collection containing the alphabetically first item from each array in our collection, with three lines of code. This is not bad.
Filtering and mapping
Filtering and mapping are two closely related collection operations. Filtering extracts only those collection items that are of particular interest in a given context. Mapping transforms collections to produce new collections. But what if you only want to map a certain subset of your collection? Then it would make sense to chain together the filtering and mapping operations, right? Here's an example of what that might look like:
var collection = [
{ name: 'Karl', enabled: true },
{ name: 'Sophie', enabled: true },
{ name: 'Jerald', enabled: false },
{ name: 'Angie', enabled: false }
];
_.compose(
_.partialRight(_.map, 'name'),
_.partialRight(_.filter, 'enabled')
)(collection);
// → [ "Karl", "Sophie" ]
This map is executed using compose() to build a function that is called right away, with our collection as the argument. The function is composed of two partials. We're using partialRight() on both arguments because we want the collection supplied as the leftmost argument in both cases. The first partial function is filter(). We're partially applying the enabled argument. So this function will filter our collection before it's passed to map(). This brings us to our next partial in the function composition. The result of filtering the collection is passed to map(), which has the name argument partially applied. The end result is a collection with enabled name strings.
The important thing to note about the preceding code is that the filtering operation takes place before the map() function is run. We could have stored the filtered collection in an intermediate variable instead of streamlining with compose(). Regardless of flavor, it's important that the items in your mapped collection correspond to the items in the source collection. It's conceivable to filter out the items in the map() callback by not returning anything, but this is ill-advised as it doesn't map well, both figuratively and literally.
Mapping objects
The previous section focused on collections and how to map them. But wait, objects are collections too, right? That is indeed correct, but it's worth differentiating between the more traditional collections, arrays, and plain objects. The main reason is that there are implications with ordering and keys when performing map/reduce. At the end of the day, arrays and objects serve different use cases with map/reduce, and this article tries to acknowledge these differences.
Now we'll start looking at some techniques Lo-Dash programmers employ when working with objects and mapping them to collections. There are a number of factors to consider such as the keys within an object and calling methods on objects. We'll take a look at the relationship between key-value pairs and how they can be used in a mapping context.
Working with keys
We can use the keys of a given object in interesting ways to map the object to a new collection. For example, we can use the keys() function to extract the keys of an object and map them to values other than the property value, as shown in the following example:
var object = {
first: 'Ronald',
last: 'Walters',
employer: 'Packt'
};
_.map(_.sortBy(_.keys(object)), function(item) {
return object[item];
});
// → [ "Packt", "Ronald", "Walters" ]
The preceding code builds an array of property values from object. It does so using map(), which is actually mapping the keys() array of object. These keys are sorted using sortBy(). So Packt is the first element of the resulting array because employer is alphabetically first in the object keys.
Sometimes, it's desirable to perform lookups in other objects and map those values to a target object. For example, not all APIs return everything you need for a given page, packaged in a neat little object. You have to do joins and build the data you need. This is shown in the following code:
var users = {},
preferences = {};
_.each(_.range(100), function() {
var id = _.uniqueId('user-');
users[id] = { type: 'user' };
preferences[id] = { emailme: !!(_.random()) };
});
_.map(users, function(value, key) {
return _.extend({ id: key }, preferences[key]);
});
// →
// [
// { id: "user-1", emailme: true },
// { id: "user-2", emailme: false },
// ...
// ]
This example builds two objects, users and preferences. In the case of each object, the keys are user identifiers that we're generating with uniqueId(). The user objects just have some dummy attribute in them, while the preferences objects have an emailme attribute, set to a random Boolean value.
Now let's say we need quick access to this preference for all users in the users object. As you can see, it's straightforward to implement using map() on the users object. The callback function returns a new object with the user ID. We extend this object with the preference for that particular user by looking at them by key.
Calling methods
Objects aren't limited to storing primitive strings and numbers. Properties can store functions as their values, or methods, as they're commonly referred. However, depending on the context where you're using your object, methods aren't always callable, especially if you have little or no control over the context where your objects are used. One technique that's helpful in situations such as these is mapping the result of calling these methods and using this result in the context in question. Let's see how this can be done with the following code:
var object = {
first: 'Roxanne',
last: 'Elliot',
name: function() {
return this.first + ' ' + this.last;
},
age: 38,
retirement: 65,
working: function() {
return this.retirement - this.age;
}
};
_.map(object, function(value, key) {
var item = {};
item[key] = _.isFunction(value) ? object[key]() : value
return item;
});
// →
// [
// { first: "Roxanne" },
// { last: "Elliot" },
// { name: "Roxanne Elliot" },
// { age: 38 },
// { retirement: 65 },
// { working: 27 }
// ]
_.map(object, function(value, key) {
var item = {};
item[key] = _.result(object, key);
return item;
});
// →
// [
// { first: "Roxanne" },
// { last: "Elliot" },
// { name: "Roxanne Elliot" },
// { age: 38 },
// { retirement: 65 },
// { working: 27 }
// ]
Here, we have an object with both primitive property values and methods that use these properties. Now we'd like to map the results of calling those methods and we will experiment with two different approaches. The first approach uses the isFunction() function to determine whether the property value is callable or not. If it is, we call it and return that value. The second approach is a little easier to implement and achieves the same outcome. The result() function is applied to the object using the current key. This tests whether we're working with a function or not, so our code doesn't have to.
In the first approach to mapping method invocations, you might have noticed that we're calling the method using object[key]() instead of value(). The former retains the context as the object variable, but the latter loses the context, since it is invoked as a plain function without any object. So when you're writing mapping callbacks that call methods and not getting the expected results, make sure the method's context is intact.
Perhaps, you have an object but you're not sure which properties are methods. You can use functions() to figure this out and then map the results of calling each method to an array, as shown in the following code:
var object = {
firstName: 'Fredrick',
lastName: 'Townsend',
first: function() {
return this.firstName;
},
last: function() {
return this.lastName;
}
};
var methods = _.map(_.functions(object), function(item) {
return [ _.bindKey(object, item) ];
});
_.invoke(methods, 0);
// → [ "Fredrick", "Townsend" ]
The object variable has two methods, first() and last(). Assuming we didn't know about these methods, we can find them using functions(). Here, we're building a methods array using map(). The input is an array containing the names of all the methods of the given object. The value we're returning is interesting. It's a single-value array; you'll see why in a moment. The value of this array is a function built by passing the object and the name of the method to bindKey(). This function, when invoked, will always use object as its context.
Lastly, we use invoke() to invoke each method in our methods array, building a new result array. Recall that our map() callback returned an array. This was a simple hack to make invoke() work, since it's a convenient way to call methods. It generally expects a key as the second argument, but a numerical index works just as well, since they're both looked up as same.
Mapping key-value pairs
Just because you're working with an object doesn't mean it's ideal, or even necessary. That's what map() is for—mapping what you're given to what you need. For instance, the property values are sometimes all that matter for what you're doing, and you can dispense with the keys entirely. For that, we have the values() function and we feed the values to map():
var object = {
first: 'Lindsay',
last: 'Castillo',
age: 51
};
_.map(_.filter(_.values(object), _.isString), function(item) {
return '<strong>' + item + '</strong>';
});
// → [ "<strong>Lindsay</strong>", "<strong>Castillo</strong>" ]
All we want from the object variable here is a list of property values, which are strings, so that we can format them. In other words, the fact that the keys are first, last, and age is irrelevant. So first, we call values() to build an array of values. Next, we pass that array to filter(), removing anything that's not a string. We then pass the output of this to map, where we're able to map the string using <strong/> tags.
The opposite might also be true—the value is completely meaningless without its key. If that's the case, it may be fitting to map key-value pairs to a new collection, as shown in the following example:
function capitalize(s) {
return s.charAt(0).toUpperCase() + s.slice(1);
}
function format(label, value) {
return '<label>' + capitalize(label) + ':</label>' +
'<strong>' + value + '</strong>';
}
var object = {
first: 'Julian',
last: 'Ramos',
age: 43
};
_.map(_.pairs(object), function(pair) {
return format.apply(undefined, pair);
});
// →
// [
// "<label>First:</label><strong>Julian</strong>",
// "<label>Last:</label><strong>Ramos</strong>",
// "<label>Age:</label><strong>43</strong>"
// ]
We're passing the result of running our object through the pairs() function to map(). The argument passed to our map callback function is an array, the first element being the key and the second being the value. It so happens that the format() function expects a key and a value to format the given string, so we're able to use format.apply() to call the function, passing it the pair array. This approach is just a matter of taste. There's no need to call pairs() before map(). We could just as easily have called format directly. But sometimes, this approach is preferred, and the reasons, not least of which is the style of the programmer, are wide and varied.
Summary
This article introduced you to the map/reduce programming model and how Lo-Dash tools help realize it in your application. First, we examined mapping collections, including how to choose which properties get included and how to perform calculations. We then moved on to mapping objects. Keys can have an important role in how objects get mapped to new objects and collections. There are also methods and functions to consider when mapping.
Resources for Article:
Further resources on this subject:
The First Step [article]
Recursive directives [article]
AngularJS Project [article]
Read more
United States
Great Britain
India
Germany
France
Canada
Russia
Spain
Brazil
Australia
Singapore
Canary Islands
Hungary
Ukraine
Luxembourg
Estonia
Lithuania
South Korea
Turkey
Switzerland
Colombia
Taiwan
Chile
Norway
Ecuador
Indonesia
New Zealand
Cyprus
Denmark
Finland
Poland
Malta
Czechia
Austria
Sweden
Italy
Egypt
Belgium
Portugal
Slovenia
Ireland
Romania
Greece
Argentina
Netherlands
Bulgaria
Latvia
South Africa
Malaysia
Japan
Slovakia
Philippines
Mexico
Thailand
