FunFunFunction Video: Map - Part 2 of Functional Programming in JavaScript

(This post is part of the F3C series)

Moving on from the higher-order function filter in the previous video, another higher-order function is introduced: map. map is similar to filter in that it also works on an array, producing another array. It is different to filter in that the function passed in should output elements for the array being produced, rather than boolean values that dictates the presence of elements in the new array.

So map "transforms" arrays. Compared to the imperative version of producing a list of animal names, the functional version with map is an awful lot shorter. It gets even shorter with the introduction of ES6 arrow functions. Shorter code means less surface area for bugs, but it also improves the readability, and arrow functions help with this too.

Further, as the functions are so short, embellishing them with "meaningful names" for the parameters actually detracts from that readability, so as is often the style with functional programming elsewhere, short parameter names can be used to good effect.

The shortest version that MPJ comes up with is 39 characters, but there are extraneous brackets around the parameter that we can remove, reducing it even further:

var names = animals.map(x => x.name)

Lovely.