Math.min with map returns NaN on 0 in collection

Question

I'm working on a piece of code where I need to map out Min and Max values within the collection. It worked fine until I introduced 0 values into the collection which now returns NaN. If i run the function without the 0 values it will work as intended.

const minVal = Math.min(...this.wells.map(d => Number(d.valueText) || Number(d.value)));
const maxVal = Math.max(...this.wells.map(d => Number(d.valueText) || Number(d.value)));

So if we have values from 2 - 0.00003 - 0 the minimum value should be 0 and the maximum value should be 2.

now if it was lets say 10 to 0.000000001 it will work or if we will have 1 to 10000 it will work.

let wells = [];

wells.push({
  posCol: 0,
  posRow: 0,
  valueText: 2
});
wells.push({
  posCol: 1,
  posRow: 0,
  valueText: 4
});
wells.push({
  posCol: 2,
  posRow: 0,
  valueText: 0
});

const minVal = Math.min(...wells.map(d => Number(d.valueText) || Number(d.value)));
const maxVal = Math.max(...wells.map(d => Number(d.valueText) || Number(d.value)));

console.log(minVal);
console.log(maxVal);

Below I'll add an example that will work

let wells = [];

    wells.push({
      posCol: 0,
      posRow: 0,
      valueText: 2
    });
    wells.push({
      posCol: 1,
      posRow: 0,
      valueText: 4
    });
    wells.push({
      posCol: 2,
      posRow: 0,
      valueText: 1
    });

    const minVal = Math.min(...wells.map(d => Number(d.valueText) || Number(d.value)));
    const maxVal = Math.max(...wells.map(d => Number(d.valueText) || Number(d.value)));

    console.log(minVal);
    console.log(maxVal);

SOLUTION FOR ANYONE WHO COMES ACROSS THIS ISSUE Ref @VLAZ Explanation

    let wells = [];

    wells.push({
      posCol: 0,
      posRow: 0,
      valueText: 2
    });
    wells.push({
      posCol: 1,
      posRow: 0,
      valueText: 4
    });
    wells.push({
      posCol: 2,
      posRow: 0,
      valueText: 0
    });

    const minVal = Math.min(...wells.map(d => Number(d.value) || Number(d.valueText)));
    const maxVal = Math.max(...wells.map(d => Number(d.value) || Number(d.valueText)));

    console.log(minVal);
    console.log(maxVal);

The issue was that value of 0 was evaluated as falsy and as such went to a fallback that in that instance was an undefined property which resulted in NaN. Solution was to switch the two around.

I didn't manage to reproduce the error, could you provide an example of the issue? That would help to better understand the problem. You can easily create an example on CodeSandbox. https://codesandbox.io/s/vanilla — Samuel Vaillant, Sep 30 '19 at 11:12
@SamuelVaillant it's always preferable to create a runnable here directly using Stack Snippets which can be made with the `[<>]` button instead of having the code off-site. [More info](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) — VLAZ, Sep 30 '19 at 11:14
I'm sorry, new to actually posting on stack overflow but here is a quick example code to replicate the condition also Ref: https://codesandbox.io/s/epic-bose-9kogu @VLAZ & I've added a runnable snippet. Sorry for being a scrub :) — VoidEssy, Sep 30 '19 at 11:28
You don't have a `value` property on your items. So if `valueText` is `0`, it would fallback to `Number(undefined)` — VLAZ, Sep 30 '19 at 11:35
@vlaz Don't think that's the case because the || is there because i've objects coming in that either have valueText or value. But never both at the same time. So could you please elaborate how numerical value of 0 causes a fallback to undefined? Since 0 is a number. — VoidEssy, Sep 30 '19 at 11:40
When you use [the OR operator it acts as a fallback for when you get falsy values](https://stackoverflow.com/questions/2802055/what-does-the-construct-x-x-y-mean). So, with `valueText = 0`, you'd get `Number(0)` which is falsy and thus would continue the evaluation after the `||` which will resolve as `Number(undefinded)`, since there is no `value` property. The return value of `Number(undefined)` is `NaN` and `Math.max(, NaN)` is `NaN` - same with `Math.min` — VLAZ, Sep 30 '19 at 11:45
Alright thanks @Vlaz I've switched them around because it's an edge case until i can figure out a better way to address it but this resolves the issue for now. But i'll need to make a note on this. Again I highly appreciate you explaining this intricacy for me :) — VoidEssy, Sep 30 '19 at 11:47
You could also just do `Number(d.valueText || d.value || 0)` it's shorter and accounts for either of these being `undefined`. Although, if you always have numerics, you could just do `d => d.valueText || d.value || 0` - no need to explicitly transform using `Number` — VLAZ, Sep 30 '19 at 11:51
Unfortunately I don't always have numerics sometimes i need the NaN to avoid triggering the layout. This is a precursor to heatmap generation and sometimes the data is non-numeric in which case it shouldn't be mapped. Also correct me if i'm wrong won't ```Number(d.valueText || d.value || 0)``` mean that if i get the NaN it will become 0? Because that's how i understand it. — VoidEssy, Sep 30 '19 at 11:58
No, it means that if `d.valueText` and `d.value` are both [falsy](https://stackoverflow.com/questions/19839952/all-falsey-values-in-javascript), then whatever gets passed into `Number` will default to `0`. — VLAZ, Sep 30 '19 at 12:02

score 0 · Accepted Answer · answered May 19 '20 at 11:50

SOLUTION FOR ANYONE WHO COMES ACROSS THIS ISSUE Ref @VLAZ Explanation

    let wells = [];

    wells.push({
      posCol: 0,
      posRow: 0,
      valueText: 2
    });
    wells.push({
      posCol: 1,
      posRow: 0,
      valueText: 4
    });
    wells.push({
      posCol: 2,
      posRow: 0,
      valueText: 0
    });

    const minVal = Math.min(...wells.map(d => Number(d.value) || Number(d.valueText)));
    const maxVal = Math.max(...wells.map(d => Number(d.value) || Number(d.valueText)));

    console.log(minVal);
    console.log(maxVal);

The issue was that value of 0 was evaluated as falsy and as such went to a fallback that in that instance was an undefined property which resulted in NaN. Solution was to switch the two around.

Math.min with map returns NaN on 0 in collection

1 Answers1