Using Map and Reduce in Functional JavaScript

This article was peer reviewed by Panayiotis Velisarakos, Tim Severien and Dan Prince. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

With all the talk about workflows that support the amazing new features in ECMAScript 6, it's easy to forget that ECMAScript 5 brought us some great tools to support functional programming in JavaScript which we can use today. Among these are the native map() and reduce() methods on the base JavaScript Array object.

[author_more]

If you're not using map() and reduce() today, it's time you started. Most contemporary JavaScript platforms support ECMAScript 5 natively. Mapping and reducing can make your code much cleaner and more easy to read and maintain, and put you on a path toward more elegant functional development.

Performance: A Caveat

Of course, reading and maintaining your code has to be balanced against performance when the situation calls for it. Currently browsers do perform more efficiently using more cumbersome traditional techniques, such as for loops.

My approach is usually to write code for readability and maintainability first, and then optimize for performance if I notice issues in real world situations. Premature optimization is the devil.

It's also worth considering that using methods such as map() and reduce() may take better advantage of improvements in the JavaScript engine as browsers optimize for them in the future. Unless I'm up against the wall on a performance issue, I prefer to code optimistically, and keep performance tweaks that make my code less attractive in my back pocket in case I need them.

Using Map

Mapping is a fundamental functional programming technique for operating on all of the elements in an array and producing another array of the same length with transformed contents.

To make that a little bit more concrete, let's come up with a simple use case. For example, imagine that you have an array of words, and you need to transform that into an array that contains the length of each word. (I know, that's not the sort of complex rocket science you often need to do for your sophisticated application, but understanding how it works in a simple case like this will help you apply it in cases where it can add real value to your code).

You probably already know how to do what I just described using a for loop on the array. It might look something like this:

var animals = ["cat","dog","fish"];
var lengths = [];
var item;
var count;
var loops = animals.length;
for (count = 0; count < loops; count++){
  item = animals[count];
  lengths.push(item.length);
}
console.log(lengths); //[3, 3, 4]

All we did was define a few variables: an array called animals that contained our words, an empty array called lengths that will contain the output of our operation, and a variable called item to temporarily store each of the items that we were going to be manipulating within each loop of the array. We set up a for loop with a temporary internal count variable and a loops variable to optimize our for loop. Then we iterated through each of the items up to the length of the animals array. For each one we calculated the length, and pushed that onto the lengths array.

Continue reading %Using Map and Reduce in Functional JavaScript%

by M. David Green via SitePoint