Sum values of nested objects without side-effects (reduce)

Question

I'm trying to sum nutritional values nested inside food objects:

[
  {
    id: 'Potato',
    nutrition: [
      { id: 'PROT', val: 4 },
      { id: 'SUGAR', val: 1 }
    ]
  },
  {
    id: 'Banana',
    nutrition: [
      { id: 'FIB', val: 10 },
      { id: 'SUGAR', val: 4 }
    ]
  }
]

I use Array.prototype.reduce() to do so:

foods.reduce((acc, { nutrition }) => {
    nutrition.map((x) => {
      let current = acc.find((y) => y.id === x.id)
      if (current) current.val += x.val
      else acc.push(x)
    })
  return acc
}, [])

This works, but it manipulates my original array and I cannot figure out why. I have tried to use the spread-operator and let/var but to no avail. How can I achieve what I want without side-effects?

"*it manipulates my original array and I cannot figure out why.*" -> `current.val += x.val` — VLAZ, Mar 09 '21 at 14:10
@VLAZ okay but how can I create a copy of the food object then? I though "let current" would create a copy — howtopythonpls, Mar 09 '21 at 14:14
It doesn't. `a = {}; b = a` means there is a single object and both `a` and `b` point to it. Manipulating one, "changes" the other. Well, since they are both literally the same object, you only change one. — VLAZ, Mar 09 '21 at 14:17
See [Modifying a copy of a JavaScript object is causing the original object to change](https://stackoverflow.com/q/29050004/4642212). — Sebastian Simon, Mar 09 '21 at 16:20

gorak · Accepted Answer · 2021-03-09T14:29:55.260

1

You can make use of reduce and forEach and take Object.values in last, something like this:

const foods = [ { id: 'Potato', nutrition: [ { id: 'PROT', val: 4 }, { id: 'SUGAR', val: 1 } ] }, { id: 'Banana', nutrition: [ { id: 'FIB', val: 10 }, { id: 'SUGAR', val: 4 } ] }];

const result = Object.values(foods.reduce((a,{nutrition})=>{
    nutrition.forEach(({id, val})=>{
        (a[id] ??= {id, val:0}).val+=val;
    });
    return a;
},{}));

console.log(result);

edited Mar 09 '21 at 14:29

answered Mar 09 '21 at 14:14

gorak

5,233
1
7
19

Awesome, thanks! Could you explain (how can I read) '??='? I assume that it's a quick way of creating a key if there is none but have never seen it before so I am not sure. – howtopythonpls Mar 09 '21 at 14:21
2

@howtopythonpls this is logical nullish assignment, you can read about it more here:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment – gorak Mar 09 '21 at 14:22

score 1 · Answer 2 · answered Mar 09 '21 at 14:17

1

You can first make use of forEach instead of map since there is no need of map to return a new array in your use-case and fix the above by making a copy of x when pushing to the acc array like so :-

foods.reduce((acc, { nutrition }) => {
    nutrition.forEach((x) => {
      let current = acc.find((y) => y.id === x.id)
      if (current) current.val += x.val
      else acc.push({...x})
    })
  return acc
}, [])

answered Mar 09 '21 at 14:17

Lakshya Thakur

8,030
1
12
39

1

Cheers, I already marked an answer but this is equally helpful! – howtopythonpls Mar 09 '21 at 14:26
@VLAZ I don't think it will because that `current` is pointing to **object** that exists at an index inside the `acc` array and not from `nutrition`. – Lakshya Thakur Mar 09 '21 at 14:29
You're right. I misread the code - sorry. – VLAZ Mar 09 '21 at 14:30

Sum values of nested objects without side-effects (reduce)

2 Answers2