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

Literally Everything the Hacker Noon Dev Team Did in 2019

Creating: Now vs. 30 Years Ago

Latest writings on my blog

Too Long; Didn't Read

Make resilience your competitive advantage

Functional Programming in Javascript for Busy People

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

The New Year’s Resolutions Mega Thread

Benchmarking Array Traversal in Javascript: How to Go Backwards the Fastest

How to Build a Search Bar in React with React Hooks

How to Sort Array Elements: An Essential Guide

Querying Complex JSON Objects With SQL

The New Year’s Resolutions Mega Thread

Benchmarking Array Traversal in Javascript: How to Go Backwards the Fastest

How to Build a Search Bar in React with React Hooks

How to Sort Array Elements: An Essential Guide

Querying Complex JSON Objects With SQL

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps