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 Julian ShapiroApril 28, 2014
CSS vs. JS Animation: Which is Faster?
How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...
By David WalshMarch 11, 2013
An Interview with Eric Meyer
Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

Incredible Demos

By David WalshJuly 28, 2013
Create a CSS Cube
CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals. Add animation and you've got something really neat. Unfortunately each CSS cube tutorial I've read is a bit...
By David WalshAugust 23, 2015
Simple Image Lazy Load and Fade
One of the quickest and easiest website performance optimizations is decreasing image loading. That means a variety of things, including minifying images with tools like ImageOptim and TinyPNG, using data URIs and sprites, and lazy loading images. It's a bit jarring when you're lazy loading images and they just...

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

CSS vs. JS Animation: Which is Faster?

An Interview with Eric Meyer

Incredible Demos

Create a CSS Cube

Simple Image Lazy Load and Fade

Discussion