How to use array reduce with condition in JavaScript?

Question

So I have an array

const records = [
    {
        value: 24,
        gender: "BOYS"
    },
    {
        value: 42,
        gender: "BOYS"
    },
    {
        value: 85,
        gender: "GIRLS"
    },
    {
        value: 12,
        gender: "GIRLS"
    },
    {
        value: 10,
        gender: "BOYS"
    }
]

And I want to get the sum so I used the JavaScript array reduce function and got it right. Here is my code:

someFunction() {
  return records.reduce(function(sum, record){
    return sum + record.value; 
  }, 0);
}

With that code I get the value 173 which is correct. Now what I wanted to do is to get all the sum only to those objects who got a "BOYS" gender.

I tried something like

someFunction() {
  return records.reduce(function(sum, record){
    if(record.gender == 'BOYS') return sum + record.value; 
  }, 0);
}

But I get nothing. Am I missing something here? Any help would be much appreciated.

T4rk1n · Accepted Answer · 2017-07-20 03:11:48Z

76

When you return nothing from the reduce function it returns undefined and undefined + 1 === NaN. You should instead filter the array before reducing.

records.filter(({gender}) => gender === 'BOYS')
    .reduce((sum, record) => sum + record.value)

edited Jul 20, 2017 at 3:11

answered Jul 20, 2017 at 2:54

T4rk1n

1,47013 silver badges17 bronze badges

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

4 Comments

Vamshi Over a year ago

This is the correct way, could you reformat the code into two lines

Alexander Higgins Over a year ago

The correct way to do it. +1 for that but it doesn't explain the cause for the original bug. Instead it just eliminates it.

T4rk1n Over a year ago

@AlexanderHiggins It's because the items were added to undefined so he got NaN (() => {})() + 1 === NaN

Furai Over a year ago

Keep in mind that using filter and then reduce introduces additional full iteration over array records. Using only reduce with else branch, like in the other answers, avoids this problem.

Alexander Higgins · Accepted Answer · 2017-07-20 03:15:57Z

24

You need to return the current sum and not undefined if your condition is not matched.

Otherwise you aren't returning your accumulator to the reduce function and end up adding unefined + record.value when matched or undefined + undefined when it is not matched.

Try this:

<script>
  const records = [{
      value: 24,
      gender: "BOYS"
    },
    {
      value: 42,
      gender: "BOYS"
    },
    {
      value: 85,
      gender: "GIRLS"
    },
    {
      value: 12,
      gender: "GIRLS"
    },
    {
      value: 10,
      gender: "BOYS"
    }
  ];

  function someFunction() {
    return records.reduce(function(sum, record) {
     return (record.gender !== 'BOYS') ? sum : sum + record.value;

    }, 0);
  }
  console.log(someFunction());
</script>

edited Jul 20, 2017 at 3:15

answered Jul 20, 2017 at 2:54

Alexander Higgins

6,9361 gold badge30 silver badges45 bronze badges

Comments

Mμ. · Accepted Answer · 2017-07-20 02:54:57Z

16

If the gender is 'GIRLS' it will return undefined. Add an else statement that returns sum and it should fix the problem.

const records = [
    {
        value: 24,
        gender: "BOYS"
    },
    {
        value: 42,
        gender: "BOYS"
    },
    {
        value: 85,
        gender: "GIRLS"
    },
    {
        value: 12,
        gender: "GIRLS"
    },
    {
        value: 10,
        gender: "BOYS"
    }
]

function someFunction() {
  return records.reduce(function(sum, record){
    if(record.gender == 'BOYS') return sum + record.value;
    else return sum;
  }, 0);
}

console.log(someFunction())

answered Jul 20, 2017 at 2:54

Mμ.

8,5723 gold badges28 silver badges36 bronze badges

Comments

dork · Accepted Answer · 2017-07-20 03:42:07Z

You should also return the sum when the gender is GIRLS. reduce goes through each item and expects a return value. If you don't return a value, it will be undefined. So after the third iteration, the sum will be undefined.

const sumBoys = records.reduce((sum, record) => {
  if (record.gender.toLowerCase() === 'boys') {
    return sum + record.value;
  }

  return sum;
}, 0);

const records = [{
  value: 24,
  gender: "BOYS"
}, {
  value: 42,
  gender: "BOYS"
}, {
  value: 85,
  gender: "GIRLS"
}, {
  value: 12,
  gender: "GIRLS"
}, {
  value: 10,
  gender: "BOYS"
}];

const sumBoys = records.reduce((sum, record) => {
  if (record.gender.toLowerCase() === 'boys') {
    return sum + record.value;
  }

  return sum;
}, 0);

console.log(sumBoys);

ABGR · Accepted Answer · 2020-05-29 08:45:09Z

2

Well, in case you just want to stick with reduce and don't want to use filter, you can do it this way:

const records = [
    {
        value: 24,
        gender: "BOYS"
    },
    {
        value: 42,
        gender: "BOYS"
    },
    {
        value: 85,
        gender: "GIRLS"
    },
    {
        value: 12,
        gender: "GIRLS"
    },
    {
        value: 10,
        gender: "BOYS"
    }
];

  var res = records.reduce(function(sum, record){
    if(record.gender === 'BOYS') {
       return sum + record.value;
     } else{
        return sum
    }; 
  }, 0);
  console.log(res);

  var res = records.reduce(function(sum, record){
    if(record.gender == 'BOYS') {
       return sum + record.value;
     } else{
        return sum
    }; 
  }, 0);

answered May 29, 2020 at 8:45

ABGR

5,2634 gold badges34 silver badges56 bronze badges

1 Comment

Auspex Over a year ago

This answer was given three years earlier

SwissCodeMen · Accepted Answer · 2022-03-27 11:58:18Z

2

You are trying to retrieve which object is having gender is "BOYS". But some objects having Female gender at that time it will returns undefined.

Try this to avoid that undefined ....

var resSet=records.filter(function(options){
    return options.gender == "BOYS";
}).reduce(function(a,b){
    return a+parseInt(b.value);
},0);

console.log("the sum of boys set is --"+resSet);

edited Mar 27, 2022 at 11:58

SwissCodeMen

5,03310 gold badges31 silver badges39 bronze badges

answered Jul 21, 2017 at 10:37

Narendra Manam

1813 silver badges11 bronze badges

Comments

gillyspy · Accepted Answer · 2022-03-02 21:23:07Z

1

Assuming that if records was empty you want to set an accumulator value that matches your output. Also the definition of empty when records.length === 0 vs when only count of BOYS is 0 might be different.

const defaultValue = 0, target = 'BOYS'
const result = records.reduce( (sum,{gender,value})=>{
   return gender === target ? (sum||0)+value : sum;
},defaultValue);

some fun with reduce and your question: https://jsfiddle.net/gillyspy/021axnsr/8/

answered Mar 2, 2022 at 21:23

gillyspy

1,6089 silver badges14 bronze badges

Comments

NIKHIL DANGI · Accepted Answer · 2023-09-22 11:56:30Z

1

const data = records.reduce(function(sum, record){
if(record.gender == 'BOYS') 
    sum = sum+record.value;
    return sum; 
}, 0);

console.log(data)

answered Sep 22, 2023 at 11:56

NIKHIL DANGI

1295 bronze badges

Comments

Narendra Manam · Accepted Answer · 2020-10-13 11:20:55Z

0

We can use this simplified code

let res= records.reduce(function(a,b){ 
    return (b.gender === "BOYS" && (a+parseInt(b.value))) || a; 
}, 0);

edited Oct 13, 2020 at 11:20

answered Oct 13, 2020 at 10:02

Narendra Manam

1813 silver badges11 bronze badges

Comments

Cedrick Campoto · Accepted Answer · 2020-11-07 22:53:35Z

0

you got an error because, reduce method iterate.in each element i. array and returns the.accumulated value,

what happen is, when your condition did not meet, the value of accumulator becomes.undefined because you.did not return it.

you need to sum first if it meets the.condition. and outside the if scope return the sum,

answered Nov 7, 2020 at 22:53

Cedrick Campoto

1211 silver badge3 bronze badges

Comments

Vinh Cao · Accepted Answer · 2023-08-01 11:37:57Z

0

Just use only Array.prototype.reduce() and you can solve it by:

const test = records.reduce((a, e) => {
        if (e.gender === "BOYS") {
          return a + e.value;
        } else {
          return a;
        }
      }, 0);
      console.log(test);

answered Aug 1, 2023 at 11:37

Vinh Cao

11 bronze badge

1 Comment

Can O'Spam feels disassociated Over a year ago

Answer of the same style given 3 years ago on this same question

Collectives™ on Stack Overflow

How to use array reduce with condition in JavaScript?

11 Answers 11

4 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

4 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related