There seem to be a lot of people who believe using map and reduce to loop through lists of items produces more readable code.

I want to figure out how to do this, since I usually use for loops.

The concept is you provide a function that performs an operation on each item in an array. Executing this function for each element produces a new list (map) or a single value (reduce).

Map / Reduce?

map and reduce are two functions provided on the Array class in JavaScript. They serve a different purpose, but are of a similar flavour.

Not about NoSql Databases

When I hear the words "map" and "reduce", I always think of NoSql. But it has nothing to do with that. The reason these two words trigger that association is because of another system called "MapReduce":

Not this: A staple of the Hadoop ecosystem is MapReduce, a computational model that basically takes intensive data processes and spreads the computation across a potentially endless number of servers (generally referred to as a Hadoop cluster).

Source: datajobs.com

Map

When you "map" elements in an array, you perform a transformation on each of the elements and you get a new array, with the transformed elements.

For example, if we want a second array, with each element multiplied by two:

var myList = [1, 2, 3];
var myListMultiplied = myList.map(function (element) { return element * 2 });
// myList will be [1, 2, 3]
// myListMultiplied will be [2, 4, 6]

The provided function is: function (element) { return element * 2 }

The equivalent with a for loop:

var myList = [1, 2, 3];
var myListMultiplied = [];
for (var i = 0; i < myList.length; i++) {
  myListMultiplied[i] = myList[i] * 2;
}

Reduce

The "reduce" function takes the elements as input, and produces a single output. An example would be a sum of all elements in the array:

var myList = [1, 2, 3];
var sum = myList.reduce(function (total, element) { return total + element; });
// sum will have the value 1 + 2 + 3 = 6

The equivalent in a for loop:

var myList = [1, 2, 3];
var sum = 0;
for (var i = 0; i < myList.length; i++) {
  sum += myList[i];
}
// sum will have the value 1 + 2 + 3 = 6

Arrow functions

To avoid having to declare inline functions a lot, arrow functions can help. Our two examples from above, changed to use the arrow notation:

myList.map(element => element * 2);

myList.reduce((total, element) => total + element);

This way, you avoid writing function and return a lot.

Then the two examples look like this:

var myList = [1, 2, 3];
var myListMultiplied = myList.map(element => element * 2);

var myList = [1, 2, 3];
var sum = myList.reduce((total, element) => total + element);

Filter

There is another function called filter.

It will take only those elements out of an array for which a given function returns true:

var myList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var bigNumbers = myList.filter((element) => element > 5);
// bigNumbers will be [6, 7, 8, 9, 10]

For comparison, here's the same functionality with a for loop:

var myList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var bigNumbers = [];
for (var i = 0; i < myList.length; i++) {
  if (myList[i] > 5) { bigNumbers.push(myList[i]); }
}
// bigNumbers will be [6, 7, 8, 9, 10]

Browser Support

The map, reduce and filter functions are supported on all major browsers, even on Internet Explorer 9.

The arrow functions are not supported in Internet Explorer, but apart from that there is support in most major browsers:

Chrome as of Version 45
Firefox as of Version 22

Conclusion

Using the map, reduce and filter functions, in combination with the arrow notation certainly makes code easier to write. And it is much shorter to read.

However, people who are unfamiliar with these functions may have to think a little bit harder when reading that code.

I wasn't convinved when I started this post, but writing it up now I think I may be using map / reduce more often.

Map Reduce in JavaScript