You’ve probably used map, reduce, and other functional methods in Javascript before, but there are a few use cases you probably haven’t thought about much or used before. In this post, I’d like to go over these methods (and a few other surprises!) to show what’s possible. Array#map Map is the powerhouse of the cell, er, Javascript. It’s my favorite way to iterate over an array when I need a new value for each value in the array. In other words, if you need to transform an array element-by-element, map is the way to go. For example: squares = arr.map( .pow(i, )); const => i Math 2 You can also get the index as the second parameter of the callback, as in: nums = arr.map( { (idx % === ) { .pow(i, );
  } { .sqrt(i);
  }
}); const ( ) => i, idx if 2 0 return Math 2 else return Math This is a contrived example, but you get the picture. It gets more useful, though, when you factor in… Array#reduce Reduce is an efficient, expressive way to get a single value from a list of values. If you didn't know about reduce, you might do something like this: storyMap = {};
stories.map( {
  storyMap[story.slug] = story;
}); let => story But with reduce, this can be made into: storyMap = stories.reduce( {
  acc[story.slug] = story; acc;
}, {}); const ( ) => acc, story return This, of course, is a contrived example, but you can clearly see how a more complex object might be built out of such a call. In this case, stands for "accumulator", the value that will eventually be passed out of reduce and into . If you pass a second parameter to reduce, as we have, that sets the initial value of the accumulator. acc storyMap Let's look at a few real examples from the Hacker Noon codebase: words = stories.map( story.wordCount || story.words)
          .filter( !!wordCount)
          .reduce( { a + b }, ); const => story => wordCount ( ) => a, b return 0 This example is fairly straightforward. We get the word count from both 2.0 and archived (1.0) stories, filter out any falsy/null values, then sum the resulting array using reduce. As you can see, we make heavy use of map, filter, and reduce: storyMap = stories.reduce( {
  acc[ ] = story; acc;
}, {}); storyMetrics = data.rows.reduce( { pathname = row.dimensions[ ]; story = storyMap[pathname]; (!story) { acc; } [pageviews, timeRead, avgTimeRead] = row.metrics[ ].values; metrics = { pageviews, : timeRead };

  acc[story.id] = metrics; acc;
}, {}); const ( ) => acc, story `/ ` ${story.slug} return const ( ) => acc, row const 0 const if return const 0 const time return

Latest writings on my blog

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Functional Programming in Javascript for Busy People

Too Long; Didn't Read

Company Mentioned

Austin Pocus

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Functional Programming in Javascript for Busy People

Too Long; Didn't Read

Company Mentioned

Austin Pocus

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES