Array reduce on javascript return wrong values with array chainability

Question

I'm trying to get some math on an array of objects. Using the map for getting the value inside of the object and then reduce for made the calcules. For some reason reduce not return the correct value.

This is an example:

var test = [{
  id: 1,
  value: 2
}];
var newe = test.map((x) => x.value).reduce(function(total, sum) {
  console.log([total, sum]);
  return total + (sum * 2);
});

It's supposed to return 4, however, it returns 2.

Do you have an idea what is wrong? I share the code on jsfiddle https://jsfiddle.net/dleo7/ckgnrubh/10/

You forgot to give the reduce an initial value, so it doesn't iterate at all and only resolves to the value of the one value. — CertainPerformance
– CertainPerformance, Commented Jul 17, 2018 at 0:41
For those coming from google, note the first edge case here: "If the array only has one element (regardless of position) and no initialValue is provided, or if initialValue is provided but the array is empty, the solo value will be returned without calling callbackFn." — kael
– kael, Commented Sep 16, 2024 at 19:43

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Doc from MDN

If initialValue isn't provided, reduce() will execute the callback function starting at index 1, skipping the first index. If initialValue is provided, it will start at index 0.

So, basically, your approach is skipping the first index 0 and the first value is returned 2. To solve this, you need to pass the initialValue, in this case, 0.

var test = [{
  id: 1,
  value: 2
}];
var newe = test.map((x) => x.value).reduce(function(total, sum) {
  return total + (sum * 2);
}, 0);
// ^
// |
// +---- InitialValue

console.log(newe);

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 17, 2018 at 0:46

Ele

33.8k7 gold badges43 silver badges80 bronze badges

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

Comments

Omidam81 · Accepted Answer · 2018-07-17 00:42:46Z

0

you should pass initial value to reduce function,

var test = [{
  id: 1,
  value: 2
}];
var newe = test.map((x) => x.value).reduce(function(total, sum) {
  console.log([total, sum]);
  return total + (sum * 2);
}, 0);

document.getElementById('output').innerHTML = newe;

answered Jul 17, 2018 at 0:42

Omidam81

1,91712 silver badges21 bronze badges

Collectives™ on Stack Overflow

Array reduce on javascript return wrong values with array chainability

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related