Uses of reduce

ongoing collection

Getting the intervals between array values

So say you have an array like…

var arr = [0,13,17,20,46,100];

…and you want to know what the spaces are between each value for eg this stack overflow answer Then you can do it like this

var intervals = arr.reduce(function(previousValue, currentValue,i ,a){
    if( i < (a.length - 1) ){
        previousValue.push(a[i+1] - currentValue);
    }
    return previousValue;
}, []);

Expanding an array of objects based on some property

Sometimes I need an array based on some propery of a list of objects e.g. I want to render one circle for each member of parliament in a set of election results – Such results are usually provided as totals (

[
  {
    party:'Labour',
    seats:232
  },
  {
    party:'Conservative',
    seats:331
  }
...
]

but D3’s canonical representation is an array of 1 value per visualisation element so we need something more like

['Labour','Labour','Labour','Labour' ... X232 ... 'Conservative','Conservative' ... X331 ...]

Reduce can help here …

// expand.js

var expanded = arr.reduce(function(value, d){
    var l = new Array( Number(d.count) )
    for(var i=0;i<d.count;i++){
        value.push(d.type);
    }
    return value;
}, []);

Note: seems strange to expand an array based on a reduce function. I’d have prefered it to be called fold which is more neutral maybe?

making a lookup object from an array…

create an object to retrieve a value directly based on some property, you’ll get funny results if the ‘key’ property has the same value accross several array elements

//makelookup.js

function makeLookup(array, key){
    return array.reduce(function(prev, current, i, a){
        prev[ current[key] ] = current;
        return prev;
    }, {});
}