javascript reduce on properties of an array of objects acting weird

Question

I have an array like this:

parts: [
      {
        name: 'Fundamentals of React',
        exercises: 10,
        id: 1
      },
      {
        name: 'Using props to pass data',
        exercises: 7,
        id: 2
      },
      {
        name: 'State of a component',
        exercises: 14,
        id: 3
      },
      {
        name: 'Redux',
        exercises: 11,
        id: 4
      }
    ]

I would like to get the sum of the excercises. I'm trying to accomplish it thusly:

const Total = (props) => {

  const total = props.parts.reduce( (prev, cur) => {
    
    console.log('prev.excercises : ', prev.exercises)
    console.log('cur.excercises : ', cur.exercises)

    return prev.exercises + cur.exercises 
  })

  return (
    <>
      <p>Number of exercises {total}</p>
    </>
  )
}

But this results in NaN. The console shows why this result occurs, but not why the prev.excercises value is acting weird:

prev.excercises :  10
cur.excercises :  7
prev.excercises :  undefined
cur.excercises :  14
prev.excercises :  undefined
cur.excercises :  11

I'm really new to js, so there is probably something really simple I'm doing wrong.. appreciate the help in advance!

You're not giving an initial value to reduce, thus prev will change from being an object the first iteration to being a number the second one. Please review how Array#reduce works because you're trying to do two conflicting things with it right now which would of course lead to weird results. — VLAZ
– VLAZ, Commented Feb 11, 2022 at 8:55
Did you look at the documentation for reduce. You don't have an initial variable. prev.excercises doesn't exist. — Andy
– Andy, Commented Feb 11, 2022 at 8:55
@Andy exists only the first time the function is called because without an explicit initial value, the first item in the array becomes the initial value. — VLAZ
– VLAZ, Commented Feb 11, 2022 at 8:58
you should change return prev.exercises + cur.exercises to return prev + cur.exercises — Parvesh Kumar
– Parvesh Kumar, Commented Feb 11, 2022 at 8:59
Technically, yes, but introducing steps to ensure that doesn't happen is important. — Andy
– Andy, Commented Feb 11, 2022 at 9:01

Ahmed Ali · Accepted Answer · 2022-02-11 09:41:51Z

2

You're trying to access it as an object but are returning it as an integer

const Total = (props) => {

  const total = props.parts.reduce( (prev, cur) => {

    console.log('prev.excercises : ', prev.exercises)
    console.log('cur.excercises : ', cur.exercises)

    return {exercises : prev.exercises + cur.exercises}
  })

If you don't want to return object you can do it like this

const total = props.parts.reduce( (prev,    cur) => {
prev=typeof prev==="object" ?  prev.exercises:prev
console.log('prev.excercises : ', prev)
console.log('cur.excercises : ', cur.exercises)

return  prev+ cur.exercises  })

edited Feb 11, 2022 at 9:41

answered Feb 11, 2022 at 9:10

Ahmed Ali

5372 silver badges9 bronze badges

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

2 Comments

mortar-1 Over a year ago

Thank You! This works. But as I sed, I'm new to javascript syntax and I really don't understand why this helps. I shall dive in to the documentation of reduce! Maybe there I will understand, why prev and cur are acting differently.

Ahmed Ali Over a year ago

All the best in your journey learning javascript

mortar-1 · Accepted Answer · 2022-02-11 13:42:24Z

0

I also got it working like this, but I guess Ahmed Ali's answer is more to the nose!

const Total = (props) => {

  const total = props.parts.map(part => part.exercises).
  reduce((prev, cur) => {
    console.log('prev : ', prev)
    console.log('cur : ', cur)
    return prev + cur
  })

answered Feb 11, 2022 at 13:42

mortar-1

1379 bronze badges

Collectives™ on Stack Overflow

javascript reduce on properties of an array of objects acting weird

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related