Replace NaN with another character using JavaScript

July 2, 2022

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 returns NaN.

To fix this, I separately created an array with variables that already have some values. Next, I started the loop. If the condition returns NaN, then it should be replaced with "-". But it doesn’t work.

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>

>Solution :

Update

a good approach would be to have all values in a array. then you can use a loop to replace the NaN values. Afterwards you can handle the new mapped array like you want.

const arr = [1, 3, 2, NaN].map(n => n != n ? "-" : n)
console.log(arr)

You can check with isNaN() function and if is true the you can print "-". In your case i would wrap this check in a function. Like this:

function checkNumber(n) {
  return isNaN(n) ? "-" : n;
}

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 = checkNumber(a);
  x2 = elem('b1').innerHTML = checkNumber(b);
  x3 = elem('c1').innerHTML = checkNumber(c);
  x4 = elem('d1').innerHTML = checkNumber(d);
  
  var arrX = [x1, x2, x3, x4];
  
  for (var x of arrX) {
    x = checkNumber(x);
    console.log(x);    
 }
}


iFunc ();

function checkNumber(n) {
  return isNaN(n) ? "-" : n;
}

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