Return Zero if input value is NaN

Question

Is there a best way to prevent NaN? I have number input field that whenever I clear the field, I get NaN.

_amount: function(e) {
  var value = parseInt(e.target.value);
  var newValue = (value === NaN ? 0 : value); // Thought this could work
},

<input type="number" value={this.state.amount} onChange={this_amount} />

Now in my render I have 400 - this.state.amount. The things is, when I clear the input field, amount state is null. How to prevent this? Is it possible that when I clear the field I get zero? Say I type in 3 then clear the field, NaN pops up.

Thanks

Really, Sylar? You don't think anyone has asked how to check a number is NaN in JavaScript before? — DavidS, Jun 23 '16 at 17:52
Im intrigued about this website, Stack overflow, and most of its users. I've noticed that bullies love to prey on noobs. Those bullies are the ones that downvotes without thinking. Yes I should have researched but I forgot. Maybe a notice to say to research first?? Damn Could I deleted the post? No! Because an answer was already given. — Sylar, Jun 24 '16 at 09:14
You seem to be taking these downvotes too personally. The downvote button is for, among other things, poorly researched questions. That is why it exists. It's not meant to "bully" you. You are not a victim, you're just some guy who asked a question without trying to answer it first. — DavidS, Jun 24 '16 at 14:44
@DavidS, considering @Sylar's question is [clearly] in reaction to having a React state management bug I think it's perfectly fine. A little guidance would be more helpful. e.g. using falsey evaluation would be a useful hint - `value={this.state.amount || 0}` — BradGreens, Dec 06 '19 at 20:22
@BradGreens - absolutely concur - I've been writing react a while and just ran into a similar problem. BTW, coercing the value to zero in case of a falsy input yields a crappy UX where there's a zero you can't delete. I instead used `value={this.state.amount || ''}` where coercing to an empty string means you can delete the number all the way - FWIW — matsad, Feb 19 '20 at 22:31

Rayon · Accepted Answer · 2016-06-23T17:57:21.443

NaNis never equals to anything including NaN itself hence rely on Number.isNaN(value) method.

_amount: function(e) {
  var value = parseInt(e.target.value);
  var newValue = (isNaN(value) ? 0 : value);

  //OR sorthand as `NaN` is falsey
  var value = parseInt(e.target.value) || 0;
}

The necessity of an `isNaN` function

Unlike all other possible values in JavaScript, it is not possible to rely on the equality operators (== and ===) to determine whether a value is NaN or not, because both NaN == NaN and NaN === NaN evaluate to false. Hence, the necessity of an isNaN function.[Ref]

score 1 · Answer 2 · answered Jun 23 '16 at 17:50

1

The shortest way I found was

var number = (yourVariable || 0)

Because NaN is a falsey value, this will return 0 whenever yourVariable is NaN.

A way to check, if a number is NaN or not is to use the isNaN function.

isNaN(yourVariable); // Returns true is yourVariable is NaN

Side note:

The above method can be used for multiple problems too. For example: getting a value from an array (wich may not exist) and getting a value from a 2d array.

Getting value from array:

yourArray[i] || 0

Where i is the id you want to access

Getting value from a 2D array:

(yourArray[i] || [])[j] || 0

Where i and j are the position of the element in the array

answered Jun 23 '16 at 17:50

Bálint

4,009
2
16
27

`0||0` also returns `0` so this isn't exclusively a test for `NaN` – evan.oman Jun 23 '16 at 21:22
@evan058 I don't think I understand that – Bálint Jun 23 '16 at 21:23
The OP asked for a way to return `0` if the input is `NaN`. Your suggested test would return `0` if the input is `NaN` or `0` which is not exactly what they asked for. – evan.oman Jun 23 '16 at 21:24
It would be giving a false positive when the input is `0` – evan.oman Jun 23 '16 at 21:25
@evan058 See, returning 0 instead of 0 is kind of the same case... – Bálint Jun 23 '16 at 21:25
1

I see, so in the restricted case where you want replace a `NaN` with a `0`, it works ok because you would be replacing `0` with `0`. But I am saying that it also silently replaces any "falsy" value with `0`, including `NaN`, `0`, `false`, `null`, `undefined`, and `""` – evan.oman Jun 23 '16 at 21:31
@evan058 He knows, that the current value should be a number – Bálint Jun 23 '16 at 21:33
That's it. I wanted to return a number: `0` when there is a `NaN`. – Sylar Jun 24 '16 at 06:52

Return Zero if input value is NaN

2 Answers2

The necessity of an isNaN function

The necessity of an `isNaN` function