Javascript reduce() on Object

Question

There is nice Array method reduce() to get one value from the Array. Example:

[0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
 return previousValue + currentValue;
});

What is the best way to achieve the same with objects? I'd like to do this:

{ 
 a: {value:1}, 
 b: {value:2}, 
 c: {value:3} 
}.reduce(function(previous, current, index, array){
 return previous.value + current.value;
});

However, Object does not seem to have any reduce() method implemented.

• Sethen: Are you using Underscore.js?
• Pavel S.: Nope. Does Underscore provide reduce for objects?
• Sethen: I can't remember. I know it has a reduce method. I would check there. Though, the solution doesn't seem that difficult.
• Roatin Marth: @Sethen Maleno, @Pavel: yes _ does have a reduce for objects. Not sure if it works by accident or if object support was intentional, but indeed you can pass an object as in this question's example, and it will (conceptually) for..in, calling your iterator function with the values found at each key.

Answer 1

One option would be to reduce the keys():

var o = { 
 a: {value:1}, 
 b: {value:2}, 
 c: {value:3} 
};
Object.keys(o).reduce(function (previous, key) {
 return previous + o[key].value;
}, 0);

With this, you'll want to specify an initial value or the 1st round will be 'a' + 2.

If you want the result as an Object ({ value: ... }), you'll have to initialize and return the object each time:

Object.keys(o).reduce(function (previous, key) {
 previous.value += o[key].value;
 return previous;
}, { value: 0 });

• Mina Luke: Nice answer but it is more readable to use Object.values instead of Object.keys because we are concerned about the values here not the keys. It should be like this: Object.values(o).reduce((total, current) => total + current.value, 0)
• duhaime: Object.values has much worse browser support than Object.keys, but that might not be an issue if you use a polyfill or you transpile with Babel
• amdev: exactly, i was using this in keys that has beet retrieved from mongo model, and i passed an empty object as an initial value to the result of reduce of keys, and as much as i was using @babel/plugin-proposal-object-rest-spread plugin , i was spread the accumulator value in return of reduce and it works like a charm, but i was wondere if im doing something wrong, be cause i was passing the obejct to the initial value of reduce and your answer proved me that i did the right thing!
• Sean Munson: But using Object.values doesn't give you access to the actual key being used. Using the key , particularly in reduction, is very common
• Sean Munson: also - outside of examples - who has a list of object properties that they want to simply sum up ? Most of the time object properties are distinct.

Answer 2

What you actually want in this case are the Object.values. Here is a concise ES6 implementation with that in mind:

const add = {
 a: {value:1},
 b: {value:2},
 c: {value:3}
}
const total = Object.values(add).reduce((t, {value}) => t + value, 0)
console.log(total) // 6

or simply:

const add = {
 a: 1,
 b: 2,
 c: 3
}
const total = Object.values(add).reduce((t, n) => t + n)
console.log(total) // 6

• Jon Wood: That's Array.prototype.values() that you linked to - edited now
• danielrvt: doesn't reduce take a default value as a second parameter?
• Daniel Bayley: @danielrvt Yes but it’s optional, and in this case unnecessary. See here.

Answer 3

ES6 implementation: Object.entries()

const o = {
 a: {value: 1},
 b: {value: 2},
 c: {value: 3}
};
const total = Object.entries(o).reduce(function (total, pair) {
 const [key, value] = pair;
 return total + value.value;
}, 0);

• faboulaws: Object.entries(o); // returns [['value',1],['value',2],['value',3]]
• Martin Meeser: const [key, value] = pair; I have never seen this!
• Jakub Zawiślak: @martin-meeser - this is called destructuring. We can even omit this line by changing function (total, pair) to function (total, [key, value])
• Thomas: @faboulaws Object.entries(o); // returns [["a", { value: 1 }], ["b", { value: 2 }], ["c", { value: 3 }]]
• Huantao: @faboulaws your answer is wrong, the last line should be return total + value.value. becase Object.entries(o) [ [ "a", { "value": 1 } ], [ "b", { "value": 2 } ], [ "c", { "value": 3 } ] ] , it is very misleading. even 3 people thumbs up...

Answer 4

First of all, you don't quite get what's reduce's previous value is.

In you pseudo code you have return previous.value + current.value, therefore the previous value will be a number on the next call, not an object.

Second, reduce is an Array method, not an Object's one, and you can't rely on the order when you're iterating the properties of an object (see: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/for...in, this is applied to Object.keys too); so I'm not sure if applying reduce over an object makes sense.

However, if the order is not important, you can have:

Object.keys(obj).reduce(function(sum, key) {
 return sum + obj[key].value;
}, 0);

Or you can just map the object's value:

Object.keys(obj).map(function(key) { return this[key].value }, obj).reduce(function (previous, current) {
 return previous + current;
});

P.S. in ES6 with the fat arrow function's syntax (already in Firefox Nightly), you could shrink a bit:

Object.keys(obj).map(key => obj[key].value).reduce((previous, current) => previous + current);

Answer 5

Let me summarise the possibilities. The aim is always to make an array out of the object. There are various Javascript object functions for this. For each individual function, there are different ways of interpreting it. So it always depends on what our object looks like and what we want to do.

In the example above, it is an object with three objects.

const obj = { 
 a: {value: 1}, 
 b: {value: 2}, 
 c: {value:3} 
};

With Object.keys

Object.keys only gives us the keys of the object.

const arr = Object.keys(obj);
// output arr: 
[a, b, c]
const result = arr.reduce((total, key) => {
 return sum + obj[key].value;
}, 0);
// output result
// 6

With Object.value

Object.value() returns the every single value in an array.

const arr = Object.value(obj);
// output arr
[
 {value: 1},
 {value: 2},
 {value: 3},
]
const result = arr.reduce((total, singleValue) => {
 return total + singleValue.value;
}, 0);
// output result
// 6
// Or the short variant
const resultShort = Object.values(obj).reduce((t, n) => t + n.value, 0)
// output resultShort
// 6

With Object.entries

Object.entries splits each individual object value into an array.

const arr = Object.entries(obj)
// output arr
[
 ["a", {visitors: 1}],
 ["b", {visitors: 2}],
 ["c", {visitors: 4}]
]
const result = arr.reduce((total, singleArr) => {
 return total + singleArr[1].value;
}, 0);
// output result
// 6

Whether you do it with reduce or with the array function map() depends on you and what you want to do.

Answer 6

1:

[{value:5}, {value:10}].reduce((previousValue, currentValue) => { return {value: previousValue.value + currentValue.value}})
>> Object {value: 15}

2:

[{value:5}, {value:10}].map(item => item.value).reduce((previousValue, currentValue) => {return previousValue + currentValue })
>> 15

3:

[{value:5}, {value:10}].reduce(function (previousValue, currentValue) {
 return {value: previousValue.value + currentValue.value};
})
>> Object {value: 15}

Answer 7

An object can be turned into an array with: Object.entries(), Object.keys(), Object.values(), and then be reduced as array. But you can also reduce an object without creating the intermediate array.

I've created a little helper library odict for working with objects.

npm install --save odict

It has reduce function that works very much like Array.prototype.reduce():

export const reduce = (dict, reducer, accumulator) => {
 for (const key in dict)
 accumulator = reducer(accumulator, dict[key], key, dict);
 return accumulator;
};

You could also assign it to:

Object.reduce = reduce;

as this method is very useful!

So the answer to your question would be:

const result = Object.reduce(
 {
 a: {value:1},
 b: {value:2},
 c: {value:3},
 },
 (accumulator, current) => (accumulator.value += current.value, accumulator), // reducer function must return accumulator
 {value: 0} // initial accumulator value
);

Answer 8

Extend Object.prototype.

Object.prototype.reduce = function( reduceCallback, initialValue ) {
 var obj = this, keys = Object.keys( obj );
 return keys.reduce( function( prevVal, item, idx, arr ) {
 return reduceCallback( prevVal, item, obj[item], obj );
 }, initialValue );
};

Sample of using.

var dataset = {
 key1 : 'value1',
 key2 : 'value2',
 key3 : 'value3'
};
function reduceFn( prevVal, key, val, obj ) {
 return prevVal + key + ' : ' + val + '; ';
}
console.log( dataset.reduce( reduceFn, 'initialValue' ) );
'Output' == 'initialValue; key1 : value1; key2 : value2; key3 : value3; '.

n'Joy it, guys!! ;-)

• Johan: -1, now you have a new enumerable property on all future objects: jsfiddle.net/ygonjooh
• Emile Bergeron: Don't modify objects you don't own.
• adam.k: Please don't modify the base prototype like this. This can lead to a lot of problems for future developers working in the same code base
• user1247458: Yes, it is a "monkey patching" This solution was written 6 years ago and not too relevant now, just keep in mind And for example, it will be better to use Object.entries() in 2021

Answer 9

You can use a generator expression (supported in all browsers for years now, and in Node) to get the key-value pairs in a list you can reduce on:

>>> a = {"b": 3}
Object { b=3}
>>> [[i, a[i]] for (i in a) if (a.hasOwnProperty(i))]
[["b", 3]]

Answer 10

If you can use an array, do use an array, the length and order of an array are half its worth.

function reducer(obj, fun, temp){
 if(typeof fun=== 'function'){
 if(temp== undefined) temp= '';
 for(var p in obj){
 if(obj.hasOwnProperty(p)){
 temp= fun(obj[p], temp, p, obj);
 }
 }
 }
 return temp;
}
var O={a:{value:1},b:{value:2},c:{value:3}}
reducer(O, function(a, b){return a.value+b;},0);

/* returned value: (Number) 6 */

Answer 11

This is not very difficult to implement yourself:

function reduceObj(obj, callback, initial) {
 "use strict";
 var key, lastvalue, firstIteration = true;
 if (typeof callback !== 'function') {
 throw new TypeError(callback + 'is not a function');
 } 
 if (arguments.length > 2) {
 // initial value set
 firstIteration = false;
 lastvalue = initial;
 }
 for (key in obj) {
 if (!obj.hasOwnProperty(key)) continue;
 if (firstIteration)
 firstIteration = false;
 lastvalue = obj[key];
 continue;
 }
 lastvalue = callback(lastvalue, obj[key], key, obj);
 }
 if (firstIteration) {
 throw new TypeError('Reduce of empty object with no initial value');
 }
 return lastvalue;
}

In action:

var o = {a: {value:1}, b: {value:2}, c: {value:3}};
reduceObj(o, function(prev, curr) { prev.value += cur.value; return prev;}, {value:0});
reduceObj(o, function(prev, curr) { return {value: prev.value + curr.value};});
// both == { value: 6 };
reduceObj(o, function(prev, curr) { return prev + curr.value; }, 0);
// == 6

You can also add it to the Object prototype:

if (typeof Object.prototype.reduce !== 'function') {
 Object.prototype.reduce = function(callback, initial) {
 "use strict";
 var args = Array.prototype.slice(arguments);
 args.unshift(this);
 return reduceObj.apply(null, args);
 }
}

Answer 12

Try this one. It will sort numbers from other variables.

const obj = {
 a: 1,
 b: 2,
 c: 3
};
const result = Object.keys(obj)
.reduce((acc, rec) => typeof obj[rec] === "number" ? acc.concat([obj[rec]]) : acc, [])
.reduce((acc, rec) => acc + rec)

Answer 13

If handled as an array is much easier

Return the total amount of fruits:

let fruits = [{ name: 'banana', id: 0, quantity: 9 }, { name: 'strawberry', id: 1, quantity: 1 }, { name: 'kiwi', id: 2, quantity: 2 }, { name: 'apple', id: 3, quantity: 4 }]
let total = fruits.reduce((sum, f) => sum + f.quantity, 0);

Answer 14

Since it hasnt really been confirmed in an answer yet, Underscore's reduce also works for this.

_.reduce({ 
 a: {value:1}, 
 b: {value:2}, 
 c: {value:3} 
}, function(prev, current){
 //prev is either first object or total value
 var total = prev.value || prev
 return total + current.value
})

Note, _.reduce will return the only value (object or otherwise) if the list object only has one item, without calling iterator function.

_.reduce({ 
 a: {value:1} 
}, function(prev, current){
 //not called
})
//returns {value: 1} instead of 1

• Steve Moretz: You mean lodash?
• Chris Dolphin: Nope, I meant Underscore. But either works. They both have reduce()
• Steve Moretz: Oops I never had heard of underscore thanks.

Answer 15

Try out this one liner arrow function

Object.values(o).map(a => a.value, o).reduce((ac, key, index, arr) => ac+=key)

• mickmackusa: "Try this" answers are low-value on Stack Overflow because they miss an opportunity to empower/educate thousands of future researchers.