Why I cannot reduce an array?

Question

I would be glad if anyone could explain to me why when I want to get a sum of amounts I always get an error something like: "Operator + cannot be applied to types '{ data: string, amount: number}' or any other type.


const payments = [
      [
        { data: '11/12/19', amount: 1000 },
      ],
      [
        { data: '11/01/20', amount: 1000 },
        { data: '12/01/19', amount: 1000 },
      ],
      [],
      [
        { data: '11/02/20', amount: 1000 },
        { data: '12/02/19', amount: 1000 },
        { data: '12/02/19', amount: 1000 },
      ],
      [],
      [],
      [],
      [],
      [],
      [],
      [],
      [],
    ];

    const acc = new Array(12).fill([]);

    acc.forEach((value, index, arr) => {
      if (payments[index] === undefined) { return []; }
      console.log(payments[index]);
      const total = payments[index].reduce((acc, value) => acc + value.amount)
    });

Dacre Denny · Accepted Answer · 2019-11-28 23:47:49Z

1

The problem here is that the reduce() is attempting to add an object and a number together, when the array being reduced has more than one object in it.

This is happening because no "starting value" for your reduction is provided. When no starting value is provided, reduce will take the first item of the array, and accumulate subsequent items to that (based on your reduction logic), which in your case causes something like this to happen:

{ data: '11/01/20', amount: 1000 } + 1000 // Invalid

In your case, the problem can be resolved by supplying 0 as a second argument to reduce() (which denotes the starting value for the total). The following revision to your code (with other simplifications) should do the trick:

const payments = [
      [
        { data: '11/12/19', amount: 1000 },
      ],
      [
        { data: '11/01/20', amount: 1000 },
        { data: '12/01/19', amount: 1000 },
      ],
      [],
      [
        { data: '11/02/20', amount: 1000 },
        { data: '12/02/19', amount: 1000 },
        { data: '12/02/19', amount: 1000 },
      ],
      [],
      [],
      [],
      [],
      [],
      [],
      [],
      [],
    ]
    // Transform the payments array to a collection of totals using map
    .map((payment) => {
  
      // Pass 0 as starting value for sum calculation of the current
      // payment array
      return payment.reduce((total, item) => total + item.amount, 0);
    });

console.log(payments);

Hope that helps!

edited Nov 28, 2019 at 23:47

answered Nov 28, 2019 at 23:40

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

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

1 Comment

Valary o Over a year ago

It helped! Thanks a lot!

Snow · Accepted Answer · 2019-11-28 23:36:14Z

1

If you don't pass a second parameter to .reduce, its initial value will be the first item in the array. But your array items are objects, and objects can't be +ed with .amount (a number). Instead, give it an initial value of 0:

const total = payments[index].reduce((acc, value) => acc + value.amount, 0)

You also should probably create 12 separate arrays in your acc, rather than creating a single array that's present 12 times:

const acc = new Array(12).fill().map(() => []);

Otherwise, changing any array inside acc will change all of them.

answered Nov 28, 2019 at 23:36

Snow

4,1463 gold badges16 silver badges43 bronze badges

1 Comment

Valary o Over a year ago

It helped! Thanks a lot!

Collectives™ on Stack Overflow

Why I cannot reduce an array?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related