Replace NaN with "-" character using JavaScript

Question

Can you please tell me how to replace NaN with another character?

There are variables that are assigned some numeric value.

Further, in the function, these variables get their values, which I then display in the html table. But, sometimes some variable (let it be the variable "d") - returns NaN.

To fix this, I separately created an array with variables that already have some values.

Next, I started the iteration loop. If the condition returns NaN, then it should be replaced with "-". But, it doesn't work.

UPD Most likely, I did not correctly make it clear why I created the array. I created an array in order to iterate over all the variables that I have, and if any variable has NaN (null, undefined), then it will be assigned the value "-".

var a, b, c, d, x1, x2, x3, x4;
var elem = document.getElementById.bind(document);

function iFunc () {
  a = 1;
  b = 3;
  c = 2;
  d = NaN;
  
  x1 = elem('a1').innerHTML = a;
  x2 = elem('b1').innerHTML = b;
  x3 = elem('c1').innerHTML = c;
  x4 = elem('d1').innerHTML = d;
  
  var arrX = [x1, x2, x3, x4];
  
  for (var x of arrX) {
    if (x !== x) {
    x = "-"; // the character that was supposed to replace NaN
    console.log(x);
  }
 }
}

iFunc ();

<table>
  <tr>
    <td><span id="a1"></span></td>
    <td><span id="b1"></span></td>
    <td><span id="c1"></span></td>
    <td><span id="d1"></span></td>
  </tr>
 </table>

You claim that `d` is NaN in a comment, but it isn't. It's `undefined`. — trincot, Jul 01 '22 at 16:38
Additionally, `x = '-'` won't do anything useful because it will just update your local variable `x` but not the contents of your array. — CherryDT, Jul 01 '22 at 16:43
@ITgoldman or rather `x === undefined`. there is no need to use `typeof`. — CherryDT, Jul 01 '22 at 16:44
@ITgoldman That's not true. Please try it. You seem to confuse "not defined" with "undefined": Only if the variable doesn't even exist you'll get an error, but in that case you probably did something wrong in the first place, there shouldn't be any condition at runtime where you are unsure whether a variable is declared or not (except in some corner cases when you write code for unknown environments, module bundlers and things like these, but not in your regular code). — CherryDT, Jul 01 '22 at 16:46
Specifcally to this code you are right. These are not corner cases using a 3rd party javascript. I meant if you try it in the console you get an error. Besides, x===undefined doesn't make sense it assumes x is defined. For me, one way to check for undefinedness is enough. — IT goldman, Jul 01 '22 at 16:52
In your edit of the question you write *"...NaN (null, undefined)"*, which seems to suggest that you are not referring to [`NaN`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN), but to a more broad group of values. Please realise that `NaN` is **one specific, distinct** value, that has the type "number". — trincot, Jul 01 '22 at 17:37

score 0 · Answer 1 · answered Jul 01 '22 at 17:01

0

I'm not 100% sure what you're looking for, but to me it seems you are possibly trying to create a new array with NaN values replaced with "-". If this is the case, you could simply use .map() to iterate, similar to post above

let a;
let b;
let c;
let d;

function iFunc() {
  a = 3;
  b = 4;
  c = 24;
  d = NaN;

  let arrX = [a, b, c, d];

  function mapper(x) {
    if (!isNaN(x)) {
      return x;
    } else {
      return x = "-";
    }
  }
  const arrX2 = arrX.map(x => mapper(x))

  console.log(arrX2);
}
    
iFunc();

answered Jul 01 '22 at 17:01

sigltech

11
2

`similar to post above ` the order in which answers are sorted is not fixed and can also vary on the user settings. – t.niese Jul 01 '22 at 17:20
I created an array in order to iterate over all the variables that I have, and if any variable has NaN (null, undefined), then it will be assigned the value "-". – YuriySab Jul 01 '22 at 17:20

Raj Chudasama · Answer 2 · 2022-07-01T17:59:37.803

-1

let a, b, c, d;

  a = 1;
  b = 3;
  c = 2;
  d = NaN;

  
  let arrX = [a, b, c, d];
  for(i in arrX){
   if(isNaN(arrX[i])){
      arrX[i]='-';
   }
  }
console.log(arrX);

edited Jul 01 '22 at 17:59

answered Jul 01 '22 at 17:24

Raj Chudasama

41
4

1

This tests for falsy values. There are quite a few values that are falsy, not only `NaN`. – trincot Jul 01 '22 at 17:35
here variable 'd' is neither NaN it is actually undefined, so intentionally i used falsy value check and NaN also gives falsy value – Raj Chudasama Jul 01 '22 at 17:38
1

Yes, but my point is that it will also replace 0 with "-" (to give one example). I don't think that is what the asker wants. – trincot Jul 01 '22 at 17:39
thanks trincot for your constructive feedback. i have updated code hope now it will work as intented – Raj Chudasama Jul 01 '22 at 17:46
Just realise that when the original array has an empty string "" it will also be turned into "-", or when it was `false`, it will become "-". But when it is a non-empty string, or `true`, it will stay unchanged... These are just a few more weird effects of this `Boolean` check. – trincot Jul 01 '22 at 17:48
then the only option we have is to use isNaN function and assign value of "d" to NaN – Raj Chudasama Jul 01 '22 at 17:51

score -3 · Answer 3 · answered Jul 01 '22 at 16:41

-3

Use javascript's replace function:

https://www.w3schools.com/jsref/jsref_replace.asp

Note that you will have to coerce those NaN values into proper strings before though.

answered Jul 01 '22 at 16:41

tutiplain

1,427
4
19
37

2

String replacement doesn't have anything to do with this. – CherryDT Jul 01 '22 at 16:45
It doesn’t make any sense to convert `NaN` to a string and the replace that with `-`. You can directly check if it is `NaN`. – t.niese Jul 01 '22 at 16:48
1

And w3schools - even so they are not as bad as they used to be - are full still full of inaccuracies and bad advices. – t.niese Jul 01 '22 at 16:49
@CherryDT I think I misread the question. You're right. – tutiplain Jul 04 '22 at 13:14
@t.niese I misread the question and thought the OP was getting a NaN value as part of another string, in that case, my answer would have made more sense. Also, don't worry, you don't have to look at w3schools site if you don't want to. Just don't click on the link. – tutiplain Jul 04 '22 at 13:17
@tutiplain `Also, don't worry, you don't have to look at w3schools site if you don't want to. Just don't click on the link.` So what you are saying is that I should not warn people that they should take care if they use w3schools as a reference? That's odd. And I will look at w3schools, because there are still various questions asked here on SO, that are a due to those inaccuracies, resulting in misconceptions. And knowing those can help to clarify those misconceptions. – t.niese Jul 04 '22 at 14:47
@t.niese You're saying I should not point people to w3schools because of the bad advices on there. That makes sense. And looking at w3schools to help those that have been misled makes sense, too. Can you please point out the bad advices on the specific link I shared? I, too, wish to learn. – tutiplain Jul 05 '22 at 15:10
In the case of `replace()` the documentation is incomplete. For `newValue` they only say `The new value (to replace with)`, but it can also be a replace function. Later they "introduce" that out of nowhere, but at that point, they don't add any further information. The callback there also has only one parameter `x` denoting the match, but they don't say that it actually receives three arguments `match, offset, string`. And they don't say that `$` has a special meaning in `newValue` if `searchValue` is a regex. – t.niese Jul 05 '22 at 20:26
And such things are all over the place in w3schools. Some are less problematic, but some can lead to various problems if you don't know about them. – t.niese Jul 05 '22 at 20:31
@t.niese Thanks for the info. Would MDN have better info than w3schools? – tutiplain Jul 06 '22 at 14:49
Yes MDN is a better reference. They also have some flaws, but you can suggest changes there, and the overall quality is much better. – t.niese Jul 07 '22 at 21:18

Replace NaN with "-" character using JavaScript

3 Answers3