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

Ghost Together
7 min readOct 23, 2020

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.

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]**



Ghost Together

Ghost Together @ https://semicolon.dev is an alternative to Twitter. Sign up to meet other makers of things.