Replace NaN with another character using JavaScript

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>

UPD: with .map()

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].map(n => n != n ? "-" : n);

  console.log(arrX);
}

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>

Answer

You are changing the value returned by elem('d1').innerHTML which won’t impact what’s in the DOM. What you are trying to do in a simplified way:

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;

  elem("a1").innerHTML = a!=a ? "-" : a;
  elem("b1").innerHTML = b!=b ? "-" : b;
  elem("c1").innerHTML = c!=c ? "-" : c;
  elem("d1").innerHTML = d!=d ? "-" : d;
}

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>

To who are suggesting to use isNaN, it’s not the best way for all use cases, according to MDN:

Alternatively, in the absence of Number.isNaN, the expression (x != x) is a more reliable way to test whether variable x is NaN or not, as the result is not subject to the false positives that make isNaN unreliable.