Higher-order functions .map, .filter and .reduce in JavaScript

Things I want to accomplish in this Higher Order Function tutorial:

1. Introduce newbies to the idea of Higher Order Function in JavaScript.
2. (In a way that entertains, because HOs can get quite boring.)
3. Show fun animations explaining how Higher Order functions work.

My Coding Books

JavaScript Grammar book explains higher-order functions in detail and also shows you how they work by creating your own version of .map() method. (Among many other great examples.)

Array.map — map all values to an expression.

To kick off this tutorial I’ll start with animated example of higher-order function map. It modifies each item in the original array and returns a copy. In this case we’re simply incrementing all array items by 1. Or in other words it “maps” a new value to existing items by following the supplied expression.

**Array.map(): apply “value + 1” to a set of 7 numbers [1, 2, 3, 4, 5, 6, 7]**