JavaScript primitive (non-strict) comparison table

jsPrimitiveCompare

// italics for objects
(function (values) {
  function toString(x) {
    var v = x;
    v = (v || v === "") ? JSON.stringify(v) : String(v);
    if (typeof x === 'object') v = v.italics();
    return v;
  }
  function describe (i,j) {
    var v1 = values[i],
        v2 = values[j];
    if (i === j) {
      if (Number.isNaN(v1)) {
        return "NaN !== NaN by definition";
      } else {
        return "any value is equal to itself";
      }
    }
    var a1,a2,s1,s2,cf;
    if (v1 == null
     || v2 == null) {
      return "undefined only equals to null (except itself)";
    } else if (
        typeof v1 === 'object'
     && typeof v2 === 'object') {
      return "objects are compared by reference";
    }else if (
        typeof v1 === 'number'
     || typeof v1 === 'boolean'
     || typeof v2 === 'number'
     || typeof v2 === 'boolean') {
      cf = Number;
    }  else {
      cf = String;
    }
    function toPrimitive (v) {
      var s = '', p;
      if (v.constructor === cf) return "no conversion required";
      if (typeof v === 'object') {
        p = v.valueOf();
        s += "valueOf: " + toString(p);
        if (typeof p === 'object') {
          s += " - non-primitive\n";
          p = v.toString();
          s += "toString: " + toString(p);
          if (typeof p === 'object') {
            s += " - non-primitive\n";
            s += "Couldn't convert to primitive!\n";
          } else {
            s += "\n";
          }
        } else {
          s += "\n";
        }
        s += "ToPrimitive(" + toString(v) + ") -> " + toString(p) + "\n";
      } else {
        p = v;
      }
      return s + cf.name + "(" + toString(p) + ") -> " + toString(cf(v));
    }
    a1 = cf(v1); s1 = toString(a1);
    a2 = cf(v2); s2 = toString(a2);
    return [
      cf === Number ? "Having numbers or booleans" : "Having strings",
      "<u>arg#1</u>: " + toString(v1),
      toPrimitive(v1),
      "<u>arg#2</u>: " + toString(v2),
      toPrimitive(v2),
      s1 + ' ' + (a1 === a2 ? '===' : '!==') + ' ' + s2
    ].join("\n");
  }
  var h =
    "<style>" +
    "opaque{opacity:0.5}" +
    "table{font-family:sans-serif}" +
    "td{max-width:22px;min-width:22px;height:22px;overflow:hidden;border:1px solid silver}" +
    ".w{min-width:99px;max-width:99px}" +
    ".v{min-width:40px;max-width:40px}" +
    ".c{cursor:pointer;border:1px solid rgba(0, 0, 0, 0.3);border-radius:3px}" +
    ".y{background:#2e2}.n{background:#f99}.q{background:#bbb}.r{background:#fc8}"+
    ".t{text-align:center}"+
    "#s{white-space:pre;font-family:monospace;min-height:5em}"+
    "</style>";
  h += "<table>";
  h += "<tr class='t'><td><i>falsy?</i></td>";
  h += values.map(function (v) {
    return "<td>" + toString(v) + "</td>";
  }).join('');
  h += "<td class='v'>bool</td><td class='v'>num</td><td class='w'>string</td><td class='w'>valueOf</td><td class='w'>toString</td>";
  h += "</tr>";

  h += values.map(function (vi, i) {
    return (
      "<tr>" +
      "<td class='w " + (vi ? 'y' : 'n') + "'>" + toString(vi) + "</td>" +
      values.map(function (vj, j) {
        var c;
        if (i == j) {
          c = (Number.isNaN(vj) ? 'n' : 'q');
        } else {
          if (vi && vj
          &&  typeof vi === 'object'
          &&  typeof vj === 'object'
          &&  vi.toString() == vj.toString()) {
            c = 'r';
          } else {
            c = (vi == vj ? 'y' : 'n');
          }
        }
        return "<td class='c " + c + "' idx='" + [i,j] + "'></td>";
      }).join('') +
      "<td>" + Boolean(vi) + "</td><td>" + Number(vi) + "</td><td>" + String(vi) + "</td>" +
      (vi
      ? "<td>" + toString(vi.valueOf()) + "</td><td>\"" + vi.toString() + "\"</td>"
      : "<td>" + vi + "</td><td>\"" + vi + "\"</td>") +
      "</tr>"
    );
  }).join('');
  h += "</table><div id='s'></div>";
  document.body.innerHTML = h;
  var t = document.querySelector('table'),
      s = document.styleSheets[document.styleSheets.length-1],
      d = document.getElementById('s');
  t.onmousemove = function(event) {
    var g = event.target;
    if (!g.classList.contains('c')) return;
    d.innerHTML = describe.apply(null,g.getAttribute('idx').split(','));
    s.cssRules[0].selectorText = [
      "tr:nth-child(" + (g.parentNode.rowIndex+1) + ") .c",
      "td.c:nth-child(" + (g.cellIndex+1) + ")"
    ];
  };
}([true, 1, '1', [1], ['1'], false, 0, '0', [0], ['0'], '', [], [[]], '-1', -1, [-1], ['-1'], {}, null, undefined, NaN]));

Very interesting and useful. 👏