How to call reduce on an array of objects to sum their properties?

Question

Say I want to sum a.x for each element in arr.

arr = [ { x: 1 }, { x: 2 }, { x: 4 } ];
arr.reduce(function(a, b){ return a.x + b.x; }); // => NaN

I have cause to believe that a.x is undefined at some point.

The following works fine

arr = [ 1, 2, 4 ];
arr.reduce(function(a, b){ return a + b; }); // => 7

What am I doing wrong in the first example?

Frontogenesis

Also, I think you mean arr.reduce(function(a,b){return a + b}) in the second example. – Cycloparaffin

Thanks for the correction. I came across reduce here: developer.mozilla.org/en/JavaScript/Reference/Global_Objects/… – Frontogenesis

@Jamie Wong it is actually a part of JavaScript 1.8 – Spectrophotometer

@OriginalSyn yeah - just saw that. Interesting, but since it doesn't have full native support, the implementation still matters when answering questions like this. – Cycloparaffin

@Jamie Wong As far as I can tell Javascript 1.8+ is implemented in all current versions of the major browsers including IE – Spectrophotometer

@OriginalSyn it's actually a part of ES5. @MrE if your going to use map/reduce a lot look at underscore – Dado

@Raynos, yes Part of ES5, implemented in JavaScript 1.8 – Spectrophotometer

JavaScript versions are just versions of the Firefox interpreter, it's confusing to reference them. There is only ES3 and ES5. – Dado

Answer 1

After the first iteration your're returning a number and then trying to get property x of it to add to the next object which is undefined and maths involving undefined results in NaN.

try returning an object contain an x property with the sum of the x properties of the parameters:

var arr = [{x:1},{x:2},{x:4}];

arr.reduce(function (a, b) {
  return {x: a.x + b.x}; // returns object with property x
})

// ES6
arr.reduce((a, b) => ({x: a.x + b.x}));

// -> {x: 7}

Explanation added from comments:

The return value of each iteration of [].reduce used as the a variable in the next iteration.

Iteration 1: a = {x:1}, b = {x:2}, {x: 3} assigned to a in Iteration 2

Iteration 2: a = {x:3}, b = {x:4}.

The problem with your example is that you're returning a number literal.

function (a, b) {
  return a.x + b.x; // returns number literal
}

Iteration 1: a = {x:1}, b = {x:2}, // returns 3 as a in next iteration

Iteration 2: a = 3, b = {x:2} returns NaN

A number literal 3 does not (typically) have a property called x so it's undefined and undefined + b.x returns NaN and NaN + <anything> is always NaN

Clarification: I prefer my method over the other top answer in this thread as I disagree with the idea that passing an optional parameter to reduce with a magic number to get out a number primitive is cleaner. It may result in fewer lines written but imo it is less readable.

Spectrophotometer

Sure reduce takes in a function to perform operations on each of the elements in an array. Every time it returns a value that is used as the next 'a' variable in the operation. So first iteration a = {x:1}, b = {x:2} then second iteration a = {x:3} (combined value of first iteration), b = {x:4}. The problem with your example in the second iteration it was trying to add 3.x + b.x, 3 does not have a property called x so it returned undefined and adding that to b.x (4) returned Not a Number – Spectrophotometer

I understand the explanation, but I still don't see how {x: ... } prevents iteration 2 from calling a.x? What does that x signify? I tried using this approach with a method, and seems not to work – Caravaggio

actually, just read #2118623 and understand how it works.. but how would you do it when you have a method, rather than just straight attributes? – Caravaggio

In this case the accumulator parameter needs to have the expected x key for it to work. – Hoax

The ES6 solution provided here doesn't work. See @Casey Chu's answer for a working solution and a clear explanation – Cotillion

Please don't lie simply because you prefer a different method. The es6 method does work and if it didn't for you then you likely copied it wrong. – Spectrophotometer

Wouldn't it be a bad optimized algorithmic? reusing A object like (a.x= a.x + b.x; return a) would avoid the allocation of a new object? – Inoculum

If anyone is still active here. How would you account for null values? For example, the second object in the array x=null. – Demmer

You would add a check and return a without modifying it, or you would filter the array first before reducing – Spectrophotometer

This solution does not work with an empty array. It should return 0 (or {x: 0}, not throw an exception! – Claireclairobscure

Answer 2

A cleaner way to accomplish this is by providing an initial value as the second argument to reduce:

var arr = [{x:1}, {x:2}, {x:4}];
var result = arr.reduce(function (acc, obj) { return acc + obj.x; }, 0);
console.log(result);  // 7

The first time the anonymous function is called, it gets called with (0, {x: 1}) and returns 0 + 1 = 1. The next time, it gets called with (1, {x: 2}) and returns 1 + 2 = 3. It's then called with (3, {x: 4}), finally returning 7.

This also handles the case where the array is empty, returning 0.

Eleven

This is the solution if you have an initial value (2nd parameter of reduce) – Heine

This is less code and more direct than the accepted answer - is there any way in which the accepted answer is better than this? – Menander

As you can see , the result of a previous call is passed to the first argument to the next . – Floriated

This helped me take of the case when the array length is only 1 sometimes. – Fillagree

I think using the initialValue parameter is the clearest. However, this could also be accomplished by handling both the initial state of the accumulator (object) and its subsequent state (int), using the OR operator. arr.reduce((a,b) => (a.x|||a) + b.x) – Aldous

This is a brilliant way of using second argument of initial value, and yields out the most elegant solution. thx – Landmass

es6 way var arr = [{x:1}, {x:2}, {x:4}]; let a =arr.reduce( (acc, obj) => acc + obj.x, 0); console.log(a); – Ostiole

Excellent! I'm still trying to understand what difference establishing that initial value of 0 really makes...I guess it establishes it as an int? If so, why couldn't we use parseInt() to achieve this? I tried that, and it didn't work...well, it's working now, but always nice to feel that I fully understand. – Antifriction

The second parameter on the reduce function is what I was missing. Thanks – Dysfunction

this solution should be the top comment of this thread. Simple and clear explanation. Thank you – Cotillion

What does acc stand for? Abbrevs are the worst. – Morphogenesis

@Morphogenesis acc stands for accumulator – Eleven

Answer 3

TL;DR, set the initial value

Using destructuring

arr.reduce( ( sum, { x } ) => sum + x , 0)

Without destructuring

arr.reduce( ( sum , cur ) => sum + cur.x , 0)

With TypeScript

arr.reduce( ( sum, { x } : { x: number } ) => sum + x , 0)

Let's try the destructuring method:

const arr = [ { x: 1 }, { x: 2 }, { x: 4 } ]
const result = arr.reduce( ( sum, { x } ) => sum + x , 0)
console.log( result ) // 7

The key to this is setting initial value. The return value becomes first parameter of the next iteration.

Technique used in top answer is not idiomatic

The accepted answer proposes NOT passing the "optional" value. This is wrong, as the idiomatic way is that the second parameter always be included. Why? Three reasons:

1. Dangerous -- Not passing in the initial value is dangerous and can create side-effects and mutations if the callback function is careless.

Behold:

const badCallback = (a,i) => Object.assign(a,i)

const foo = [ { a: 1 }, { b: 2 }, { c: 3 } ]
const bar = foo.reduce( badCallback )  // bad use of Object.assign
// Look, we've tampered with the original array
foo //  [ { a: 1, b: 2, c: 3 }, { b: 2 }, { c: 3 } ]

If however we had done it this way, with the initial value:

const bar = foo.reduce( badCallback, {})
// foo is still OK
foo // { a: 1, b: 2, c: 3 }

For the record, unless you intend to mutate the original object, set the first parameter of Object.assign to an empty object. Like this: Object.assign({}, a, b, c).

2 - Better Type Inference --When using a tool like TypeScript or an editor like VS Code, you get the benefit of telling the compiler the initial and it can catch errors if you're doing it wrong. If you don't set the initial value, in many situations it might not be able to guess and you could end up with creepy runtime errors.

3 - Respect the Functors -- JavaScript shines best when its inner functional child is unleashed. In the functional world, there is a standard on how you "fold" or reduce an array. When you fold or apply a catamorphism to the array, you take the values of that array to construct a new type. You need to communicate the resulting type--you should do this even if the final type is that of the values in the array, another array, or any other type.

Let's think about it another way. In JavaScript, functions can be passed around like data, this is how callbacks work, what is the result of the following code?

[1,2,3].reduce(callback)

Will it return an number? An object? This makes it clearer

[1,2,3].reduce(callback,0)

Read more on the functional programming spec here: https://github.com/fantasyland/fantasy-land#foldable

Some more background

The reduce method takes two parameters,

Array.prototype.reduce( callback, initialItem )

The callback function takes the following parameters

(accumulator, itemInArray, indexInArray, entireArray) => { /* do stuff */ }

For the first iteration,

• If initialItem is provided, the reduce function passes the initialItem as the accumulator and the first item of the array as the itemInArray.

• If initialItem is not provided, the reduce function passes the first item in the array as the initialItem and the second item in the array as itemInArray which can be confusing behavior.

I teach and recommend always setting the initial value of reduce.

You can check out the documentation at:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Cosmotron

Destructuring is just what I wanted. Works like a charm. Thank you! – Smudge

This is an excellent answer that should be accepted as the correct answer! – Spacious

Answer 4

Others have answered this question, but I thought I'd toss in another approach. Rather than go directly to summing a.x, you can combine a map (from a.x to x) and reduce (to add the x's):

arr = [{x:1},{x:2},{x:4}]
arr.map(function(a) {return a.x;})
   .reduce(function(a,b) {return a + b;});

Admittedly, it's probably going to be slightly slower, but I thought it worth mentioning it as an option.

Saenz

Here it is in arrow notation: arr.map(a => a.x).reduce((a,b) => a + b); – Nonchalance

This solution cannot handle empty arrays. – Claireclairobscure

Answer 5

To formalize what has been pointed out, a reducer is a catamorphism which takes two arguments which may be the same type by coincidence, and returns a type which matches the first argument.

function reducer (accumulator: X, currentValue: Y): X { }

That means that the body of the reducer needs to be about converting currentValue and the current value of the accumulator to the value of the new accumulator.

This works in a straightforward way, when adding, because the accumulator and the element values both happen to be the same type (but serve different purposes).

[1, 2, 3].reduce((x, y) => x + y);

This just works because they're all numbers.

[{ age: 5 }, { age: 2 }, { age: 8 }]
  .reduce((total, thing) => total + thing.age, 0);

Now we're giving a starting value to the aggregator. The starting value should be the type that you expect the aggregator to be (the type you expect to come out as the final value), in the vast majority of cases. While you aren't forced to do this (and shouldn't be), it's important to keep in mind.

Once you know that, you can write meaningful reductions for other n:1 relationship problems.

Removing repeated words:

const skipIfAlreadyFound = (words, word) => words.includes(word)
    ? words
    : words.concat(word);

const deduplicatedWords = aBunchOfWords.reduce(skipIfAlreadyFound, []);

Providing a count of all words found:

const incrementWordCount = (counts, word) => {
  counts[word] = (counts[word] || 0) + 1;
  return counts;
};
const wordCounts = words.reduce(incrementWordCount, { });

Reducing an array of arrays, to a single flat array:

const concat = (a, b) => a.concat(b);

const numbers = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
].reduce(concat, []);

Any time you're looking to go from an array of things, to a single value that doesn't match a 1:1, reduce is something you might consider.

In fact, map and filter can both be implemented as reductions:

const map = (transform, array) =>
  array.reduce((list, el) => list.concat(transform(el)), []);

const filter = (predicate, array) => array.reduce(
  (list, el) => predicate(el) ? list.concat(el) : list,
  []
);

I hope this provides some further context for how to use reduce.

The one addition to this, which I haven't broken into yet, is when there is an expectation that the input and output types are specifically meant to be dynamic, because the array elements are functions:

const compose = (...fns) => x =>
  fns.reduceRight((x, f) => f(x), x);

const hgfx = h(g(f(x)));
const hgf = compose(h, g, f);
const hgfy = hgf(y);
const hgfz = hgf(z);

Pylorus

+1 for explaining it clearly in terms of the type system. OTOH, I think by opening with the idea that it's a catamorphism may be offputting to many... – Stiffen

Answer 6

For the first iteration 'a' will be the first object in the array, hence a.x + b.x will return 1+2 i.e. 3.

Now in the next iteration the returned 3 is assigned to a, so a is a number now n calling a.x will give NaN.

Simple solution is first mapping the numbers in array and then reducing them as below:

arr.map(a=>a.x).reduce(function(a,b){return a+b})

here arr.map(a=>a.x) will provide an array of numbers [1,2,4] now using .reduce(function(a,b){return a+b}) will simple add these numbers without any hassel

Another simple solution is just to provide an initial sum as zero by assigning 0 to a as below:

arr.reduce(function(a,b){return a + b.x},0)

Aintab

Answer 7

If you have a complex object with a lot of data, like an array of objects, you can take a step by step approach to solve this.

For e.g:

const myArray = [{ id: 1, value: 10}, { id: 2, value: 20}];

First, you should map your array into a new array of your interest, it could be a new array of values in this example.

const values = myArray.map(obj => obj.value);

This call back function will return a new array containing only values from the original array and store it on values const. Now your values const is an array like this:

values = [10, 20];

And now your are ready to perform your reduce:

const sum = values.reduce((accumulator, currentValue) => { return accumulator + currentValue; } , 0);

As you can see, the reduce method executes the call back function multiple times. For each time, it takes the current value of the item in the array and sum with the accumulator. So to properly sum it you need to set the initial value of your accumulator as the second argument of the reduce method.

Now you have your new const sum with the value of 30.

Traitor

I was going to write the same! By using map + reduce everything becomes easier. It's possible to use filter as well, depending on how data must be prepared before summing it. – Scapula

Answer 8

At each step of your reduce, you aren't returning a new {x:???} object. So you either need to do:

arr = [{x:1},{x:2},{x:4}]
arr.reduce(function(a,b){return a + b.x})

or you need to do

arr = [{x:1},{x:2},{x:4}]
arr.reduce(function(a,b){return {x: a.x + b.x}; }) 

Cycloparaffin

The first example needs a default value (such as 0) else "a" is undefined in the first iteration. – Rash

This solution cannot handle empty arrays. – Claireclairobscure

Answer 9

I did it in ES6 with a little improvement:

arr.reduce((a, b) => ({x: a.x + b.x})).x

return number

Ogilvie

This solution cannot handle empty arrays. – Claireclairobscure

Answer 10

In the first step, it will work fine as the value of a will be 1 and that of b will be 2 but as 2+1 will be returned and in the next step the value of b will be the return value from step 1 i.e 3 and so b.x will be undefined...and undefined + anyNumber will be NaN and that is why you are getting that result.

Instead you can try this by giving initial value as zero i.e

arr.reduce(function(a,b){return a + b.x},0);

---

Freemanfreemartin

Please update this to show how your approach is different from the others. – Homeward

Answer 11

I used to encounter this is my development, what I do is wrap my solution in a function to make it reusable in my environment, like this:

const sumArrayOfObject =(array, prop)=>array.reduce((sum, n)=>{return sum + n[prop]}, 0)

Arbutus

Answer 12

Just my 2 cents on setting a default value with object literal.

  let arr = [{
        duration: 1
    }, {
        duration: 3
    }, {
        duration: 5
    }, {
        duration: 6
    }];
    
    const out = arr.reduce((a, b) => {
        return {
            duration: a.duration + b.duration
        };
    }, {
        duration: 0
    });
    
    console.log(out);

Jojo

Answer 13

let temp =[{x:1},
{x:2},
{x:3},
{x:4}];
let sum = temp.map(element => element.x).reduce((a, b) => a+ b , 0)
console.log(sum);

we can used this way for sum of x

Output : 10

Antoineantoinetta

Answer 14

You can use reduce method as bellow; If you change the 0(zero) to 1 or other numbers, it will add it to total number. For example, this example gives the total number as 31 however if we change 0 to 1, total number will be 32.

const batteryBatches = [4, 5, 3, 4, 4, 6, 5];

let totalBatteries= batteryBatches.reduce((acc,val) => acc + val ,0)

Fury

Answer 15

function aggregateObjectArrayByProperty(arr, propReader, aggregator, initialValue) {
  const reducer = (a, c) => {
    return aggregator(a, propReader(c));
  };
  return arr.reduce(reducer, initialValue);
}

const data = [{a: 'A', b: 2}, {a: 'A', b: 2}, {a: 'A', b: 3}];

let sum = aggregateObjectArrayByProperty(data, function(x) { return x.b; }, function(x, y) { return x + y; }, 0);
console.log(`Sum = ${sum}`);
console.log(`Average = ${sum / data.length}`);

let product = aggregateObjectArrayByProperty(data, function(x) { return x.b; }, function(x, y) { return x * y; }, 1);
console.log(`Product = ${product}`);

Just wrote a generic function from previously given solutions. I am a Java developer, so apologies for any mistakes or non-javascript standards :-)

Khalid

Answer 16

A generic typescript function:

const sum = <T>(array: T[], predicate: (value: T, index: number, array: T[]) => number) => {
      return array.reduce((acc, value, index, array) => {
        return acc + predicate(value, index, array);
      }, 0);
    };

Example:

const s = sum(arr, (e) => e.x);

Palladian

Answer 17

var arr = [{x:1}, {x:2}, {x:3}];
arr.map(function(a) {return a.x;})
.reduce(function(a, b) {return a + b});
console.log(arr);
//I tried using the following code and the result is the data array
//result = [{x:1}, {x:2}, {x:3}];
var arr2 = [{x:1}, {x:2}, {x:3}]
.reduce((total, thing) => total + thing.x, 0);
console.log(arr2);
// and I changed the code to like this and it worked.
// result = 6

Galoot

Answer 18

We can use array reduce method to create new Object and we can use this option to sum or filter

const FRUITS = ["apple", "orange"]
const fruitBasket = {banana: {qty: 10, kg:3}, apple: {qty: 30, kg:10}, orange: {qty: 1, kg:3}}

const newFruitBasket = FRUITS.reduce((acc, fruit) => ({ ...acc, [fruit]: fruitBasket[fruit]}), {})

console.log(newFruitBasket) 

Endamage

Answer 19

reduce function iterates over a collection

arr = [{x:1},{x:2},{x:4}] // is a collection

arr.reduce(function(a,b){return a.x + b.x})

translates to:

arr.reduce(
    //for each index in the collection, this callback function is called
  function (
    a, //a = accumulator ,during each callback , value of accumulator is 
         passed inside the variable "a"
    b, //currentValue , for ex currentValue is {x:1} in 1st callback
    currentIndex,
    array
  ) {
    return a.x + b.x; 
  },
  accumulator // this is returned at the end of arr.reduce call 
    //accumulator = returned value i.e return a.x + b.x  in each callback. 
);

during each index callback, value of variable "accumulator" is passed into "a" parameter in the callback function. If we don't initialize "accumulator", its value will be undefined. Calling undefined.x would give you error.

To solve this, initialize "accumulator" with value 0 as Casey's answer showed above.

To understand the in-outs of "reduce" function, I would suggest you look at the source code of this function. Lodash library has reduce function which works exactly same as "reduce" function in ES6.

Here is the link : reduce source code

Easygoing

Answer 20

you should not use a.x for accumulator , Instead you can do like this `arr = [{x:1},{x:2},{x:4}]

arr.reduce(function(a,b){a + b.x},0)`

Narco

Answer 21

to return a sum of all x props:

arr.reduce(
(a,b) => (a.x || a) + b.x 
)

Wensleydale

Providing context as to why this answer is better then the other accepted or upvoted ones may help users when looking for the solution to their question. – Trihedral

This solution cannot handle empty arrays. – Claireclairobscure

Answer 22

Array reduce function takes three parameters i.e, initialValue(default it's 0) , accumulator and current value . By default the value of initialValue will be "0" . which is taken by accumulator

Let's see this in code .

var arr =[1,2,4] ;
arr.reduce((acc,currVal) => acc + currVal ) ; 
// (remember Initialvalue is 0 by default )

//first iteration** : 0 +1 => Now accumulator =1;
//second iteration** : 1 +2 => Now accumulator =3;
//third iteration** : 3 + 4 => Now accumulator = 7;
No more array properties now the loop breaks .
// solution = 7

Now same example with initial Value :

var initialValue = 10;
var arr =[1,2,4] ;
arr.reduce((acc,currVal) => acc + currVal,initialValue ) ; 
/
// (remember Initialvalue is 0 by default but now it's 10 )

//first iteration** : 10 +1 => Now accumulator =11;
//second iteration** : 11 +2 => Now accumulator =13;
//third iteration** : 13 + 4 => Now accumulator = 17;
No more array properties now the loop breaks .
//solution=17

Same applies for the object arrays as well(the current stackoverflow question) :

var arr = [{x:1},{x:2},{x:4}]
arr.reduce(function(acc,currVal){return acc + currVal.x}) 
// destructing {x:1} = currVal;
Now currVal is object which have all the object properties .So now 
currVal.x=>1 
//first iteration** : 0 +1 => Now accumulator =1;
//second iteration** : 1 +2 => Now accumulator =3;
//third iteration** : 3 + 4 => Now accumulator = 7;
No more array properties now the loop breaks 
//solution=7

ONE THING TO BARE IN MIND is InitialValue by default is 0 and can be given anything i mean {},[] and number

Murphy

"By default the value of initialValue will be 0" - nope. – Claireclairobscure

Answer 23

    
  
 //fill creates array with n element
 //reduce requires 2 parameter , 3rd parameter as a length
 var fibonacci = (n) => Array(n).fill().reduce((a, b, c) => {
      return a.concat(c < 2 ? c : a[c - 1] + a[c - 2])
  }, [])
  console.log(fibonacci(8))

Raynata

Did you mean to post this as an answer to a different question? – Claireclairobscure