js: array.reduce does not accumulate underlying values correctly

Question

arr = [ 

    {
       day: "monday",
       ages: [1,5,2]
    },

    {
       day: "tuesday",
       ages: [9]
    },

    {
       day: "monday",
       ages: [22,24,28]
    },

    {
       day: "tuesday",
       ages: [19]
    },

]

I want the result to be an object that has each day as a key and the values as arrays:

expected:

{
    monday: [1,5,2,22,24,28],
    tuesday: [9,19]
}

I tried using reduce as follows:

x = arr.reduce((acc,curr) => {
    acc[curr.day] = []
    acc[curr.day].push(curr.ages)
    return acc
})

but it gives me:

{
    ages: [1,5,2],
    day: "tuesday", 
    monday: [22,24,28],
    tuesday: [19]
}

why would it add ages and day as keys?

Ivar · Accepted Answer · 2021-02-08 17:45:47Z

2

Missing initial value in reduce {}, then array is not reused in each iteration , and finally arrays are not concatenated.

arr = [ 

    {
       day: "monday",
       ages: [1,5,2]
    },

    {
       day: "tuesday",
       ages: [9]
    },

    {
       day: "monday",
       ages: [22,24,28]
    },

    {
       day: "tuesday",
       ages: [19]
    },

]

console.log(arr.reduce((acc,curr) => {
    acc[curr.day] = acc[curr.day] || []
    acc[curr.day] = acc[curr.day].concat(curr.ages)
    return acc
}, {}));

answered Feb 8, 2021 at 17:45

Ivar

4,9712 gold badges30 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nina Scholz · Accepted Answer · 2021-02-08 17:49:42Z

2

You could take a logical nullish assignment ??= for assigning empty array and push spreaded array and take an empty object as start value for the accumulator.

x = arr.reduce((acc,curr) => {
    acc[curr.day] ??= [];
    acc[curr.day].push(...curr.ages);
    return acc;
}, {});

edited Feb 8, 2021 at 17:49

answered Feb 8, 2021 at 17:45

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

3 Comments

FZs Over a year ago

This code would also work with the good old || operator that has greater support (arrays can't be falsy).

Nina Scholz Over a year ago

@FZs, ??= prevents superfluous assignment, like the new ||=.

FZs Over a year ago

That's right, I've just mentioned it as ??= is a very new feature, and not everyone transpile their projects. Btw, I'd use (acc[curr.day] || (acc[curr.day] = [])).push(...curr.ages); that short-circuits as well.

mwilson · Accepted Answer · 2021-02-08 17:59:47Z

It helps when you specify the initial value for the reducer (ie: {}) so you can simply check to see if the property is there and if so, add to it, and if not, set it.

const arr = [ 
    {
       day: "monday",
       ages: [1,5,2]
    },

    {
       day: "tuesday",
       ages: [9]
    },

    {
       day: "monday",
       ages: [22,24,28]
    },

    {
       day: "tuesday",
       ages: [19]
    },
];

const result = arr.reduce((acc,curr) => {
    acc[curr.day] = acc[curr.day] ? [...acc[curr.day], ...curr.ages] : curr.ages; 
    return acc;
}, {});
console.log(result);

For the second argument to Array.reduce(Func, InitialValue) the general rule is that it is needed when you need to do something more complex with the accumulator before modifying it. In the below example, you can see that a simple reduce function add ints doesn't require an initial value. But the second example where we need to check to see if the acc contains the curr before adding it to the acc, you'll want to initialize acc is an empty array. otherwise, acc is undefined in the first run, and therefore acc.find will throw a null exception.

const arr = [1, 2, 3, 4];

// Simple summing of ints
console.log(arr.reduce( (acc, curr) => acc += curr) );

// Needing to do something with the accumulator before modiyfing it
const result = arr.reduce( (acc, curr) => {
  const found = acc.find(a => a === curr);
  if (found) {
    // do something
  }
  return acc;
});

From the docs:

InitialValue

A value to use as the first argument to the first call of the callback. If no initialValue is supplied, the first element in the array will be used as the initial accumulator value and skipped as currentValue. Calling reduce() on an empty array without an initialValue will throw a TypeError.

Collectives™ on Stack Overflow

js: array.reduce does not accumulate underlying values correctly

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related