Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Using Array reduce

By David Walsh on May 14, 2019

Every developer who specializes in any programming language will tell you there's a powerful tool the language provides that they rarely use and wish they knew more about. For me, it's Array.prototype.reduce. I quite enjoy the other Array methods like map, filter, and find, but reduce is one that I knew was powerful but never really had much use for.

It wasn't until I was refactoring some of the Firefox DevTools Debugger code that I found a great use case for reduce -- one I plan on using in the future.

Methods like forEach and map were created to avoid side effects, and reduce is no exception. In this case, however, reduce can return an Object other than an Array. Take this case for example:

// Samples sources
const sources = [
  {
    id: "server1.conn13.child1/39",
    url: "https://davidwalsh.name/"
  },
  {
    id: "server1.conn13.child1/37",
    url: "https://davidwalsh.name/util.js"
  }
];

// Return an object of sources with the keys being "id"
const sourcesMap = sources.reduce((map, source) => {
  map[source.id] = source
  return map;
}, {});

In the example above, we take an array of Source objects and return a single object literal with each Source's id as the key:

{
  "server1.conn13.child1/39": {
    "id": "server1.conn13.child1/39",
    "url": "https://davidwalsh.name/"
  },
  "server1.conn13.child1/37": {
    "id": "server1.conn13.child1/37",
    "url": "https://davidwalsh.name/util.js"
  }
}

Note that the {}, which is the last argument to reduce, is starting/default object to be returned. If there were no items in the array, {} would be returned. Also appreciate that an array method returns an object literal and not a modified array!

It's crazy that I've not used reduce more, but that's just life in our industry -- we all have a few APIs we just haven't used much of. What feature of JavaScript have you frequently seen but not used?

Recent Features

By Landon SchroppApril 14, 2014
Write Better JavaScript with Promises
You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...
By David WalshNovember 2, 2015
JavaScript Promise API
While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready? Promises are becoming a big part of the JavaScript world...

Incredible Demos

By David WalshJune 13, 2011
Create Your Own Dijit CSS Theme with LESS CSS
The Dojo Toolkit seems to just get better and better. One of the new additions in Dojo 1.6 was the use of LESS CSS to create Dijit themes. The move to using LESS is a brilliant one because it makes creating your own Dijit theme...
By David WalshJune 10, 2008
MooTools Gone Wild: Element Flashing
If you're like me and lay awake in bed at night, you've flipped on the TV and seen the commercials: misguided, attention-starved college girls fueled by alcohol ruining their futures by flashing lame camera-men on Spring Break. Why do they do it? Attention...

Discussion

Carlos Saldaña
also reduce is more faster than map when counting

https://jsbench.me/5ujuudpnmh
Andrzej
The only way to use forEach without side effects is to immediately return. Any other code in callback will cause side effect.

Leo Lanese

or you could use rxjs:

import { from, of, zip } from 'rxjs';
import { groupBy, mergeMap, toArray } from 'rxjs/operators';

const sources = [
  {
    id: "idleo",
    url: "urlleo"
  },
  {
    id: "idtom",
    url: "urltom"
  }
];

from(sources)
  .pipe(
    groupBy(n => n.id, p => p.url),
    mergeMap(group => zip(of(group.key), group.pipe(toArray())))
  )
  .subscribe(console.log);

Forrest Akin

Yes, reduce all the things! This object creation pattern is so prevalent, I typically just use keyBy()

const set = (target, key, value) => (target[key] = value, target)
const keyBy = (key, items) =>
    items.reduce((map, item) => set(map, item[key], item), {})

Using Array reduce

Recent Features

Write Better JavaScript with Promises

JavaScript Promise API

Incredible Demos

Create Your Own Dijit CSS Theme with LESS CSS

MooTools Gone Wild: Element Flashing

Discussion