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-20T03:11:48.620

70

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 '17 at 03:11

answered Jul 20 '17 at 02:54

T4rk1n

1,380
12
15

This is the correct way, could you reformat the code into two lines – Vamshi Jul 20 '17 at 02:56
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. – Alexander Higgins Jul 20 '17 at 02:59
1

@AlexanderHiggins It's because the items were added to undefined so he got NaN `(() => {})() + 1 === NaN` – T4rk1n Jul 20 '17 at 03:06

Alexander Higgins · Answer 2 · 2017-07-20T03:15:57.337

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>

score 16 · Answer 3 · answered Jul 20 '17 at 02:54

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())

score 8 · Answer 4 · answered Jul 20 '17 at 03:42

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);

score 2 · Answer 5 · edited Mar 27 '22 at 11:58

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 '22 at 11:58

SwissCodeMen

4,222
8
24
34

answered Jul 21 '17 at 10:37

Narendra Manam

161
3
11

score 2 · Answer 6 · answered May 29 '20 at 08:45

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);

This answer was given three years earlier – Auspex Jan 27 '23 at 14:48 — Auspex, Jan 27 '23 at 14:48

score 1 · Answer 7 · answered Mar 02 '22 at 21:23

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/

Narendra Manam · Answer 8 · 2020-10-13T11:20:55.790

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 '20 at 11:20

answered Oct 13 '20 at 10:02

Narendra Manam

161
3
11

score 0 · Answer 9 · answered Nov 07 '20 at 22:53

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,

score 0 · Answer 10 · answered Aug 01 '23 at 11:37

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 01 '23 at 11:37

V8C40

1
1

Answer of the same style given [3 years ago](https://stackoverflow.com/a/62082000/5273255) on this same question – Can O' Spam Aug 01 '23 at 11:41

How to use array reduce with condition in JavaScript?

10 Answers10

Linked

Related