A dirt simple introduction to higher order functions in JavaScript.

Update: This post got so popular that I’ve decided to make it into a series of 10-minute videos that teaches you functional programming in JavaScript. Here is the first episode:

End of announcement, here is the original article:

In 10 minutes, you’ll know how filter, map and reduce works.

var animals = [
  { name: ‘Waffles’, type: ‘dog’, age: 12 },
  { name: ‘Fluffy’, type: ‘cat’, age: 14 },
  { name: ‘Spelunky’, type: ‘dog’, age: 4 },
  { name: ‘Hank’, type: ‘dog’, age: 11 },
];
var oldDogs = animals.filter(function(animal) {
  return animal.age > 10 && animal.type === ‘dog’;
});
// oldDogs will now be an array that contain 
// only Waffles and Hank objects.

filter in the above example is a so-called higher-order function. This is a fancy word for a function that accepts another function as an argument. In the above example, the function passed to filter will be called once with each item in the animals array as the argument. This passed function is sometimes referred to as the callback. If the callback returns true, the items makes the cut for the new array that filter is creating, which is what ends up in the oldDogs variable.

I think that JavaScript should get more credit for popularizing higher-order functions — they are incredibly useful.

map is another example of a ridiculously useful higher-order function. Once you learn to use map, your life as a programmer changes. You’ll start understanding what all those crazy functional programming buffs think is so great. Here is the same example as above, but with map added:

var animals = [
  { name: ‘Waffles’, type: ‘dog’, age: 12 },
  { name: ‘Fluffy’, type: ‘cat’, age: 14 },
  { name: ‘Spelunky’, type: ‘dog’, age: 4 },
  { name: ‘Hank’, type: ‘dog’, age: 11 },
];
var oldDogNames = 
  animals
    .filter(function(animal) {
      return animal.age > 10 && animal.type === ‘dog’;
    })
    .map(function(animal) {
      return animal.name;
    });
// oldDogNames will now be the array [ ‘Waffles’, ‘Hank’ ].

Again, map is a higher-order function just like filter is. Map accepts a callback function, that is called for every item in the array that filter returns in the above example. Map will take every return value from the callback and create a new array with them — in this case, just the names.

Higher order functions really shine with the arrow function syntax that was added in EcmaScript 6. Look how gorgeous it becomes once you use them, and use a shorter variable instead of animal:

var oldDogNames = animals
  .filter((x) => x.age > 10 && x.type === ‘dog’)
  .map   ((x) => x.name);

Another common functional programming concept that is also implemented on JavaScript arrays is reduce:

var totalDogYears = animals
  .filter((x) => x.type === ‘dog’)
  .map   ((x) => x.age)
  .reduce((prev, cur) => { prev + cur }, 0);
  // totalDogYears will be the integer 27 (Because Waffles 12 +  
  // Spelunky 4 + Hank 11)

(Again, the above example uses the upcoming arrow function syntax)

Reduce sounds scary, but it’s actually a ridiculously simple function — it just iterates over all values in the array, passing in the value returned from the prior run as the first value (prev in the above example) and the currently iterated value (cur in the example) as the second. It’s handy for summing things up like we do a above — the name of the function comes from reducing a list to a single value. For the first iteration, there is no previous value of course, so prev will be the second argument passed to reduce, 0 in the above case.

I hope that I’ve piqued your interest a bit, there are tons more functions patterns like map and filter in functional programming, so you’re in for quite a treat once you start going down this path. Making your programming style more functional will improve you a lot as a programmer.