Home Java Don’t make (un)equals in JavaScriptlook worse than they are

Don’t make (un)equals in JavaScriptlook worse than they are

by admin

From time to time I come across publications that talk about which of the values of the operator == are equivalent (as in, here ).It is often stipulated that the data given in the table is not very well organized.
I agree, such tables are needed to better navigate the imperfections of the operator…except that the imperfections in the organization of the data in such tables themselves, in my opinion, complicate things even more. Here, for example, is the table from the link above :
Don't make (un)equals in JavaScriptlook worse than they are
Nightmare, comrades! Seems like a bigger mess to me in the line/column order.
By grouping them by intersections we get a more coherent picture:
Don't make (un)equals in JavaScriptlook worse than they are
It’s easier to navigate, isn’t it? And this table organization also allows you to see imperfections at a glance ==

Code

Below is the code I used to create my version of this table. It is available at jsfiddle

HTML

<canvas id="drawCanvas" width="500" height="500" />

JavaScript

var cmp = function(v1, v2) { return v1 ==v2; };var vals = [["false", function() { return false; }], ["0", function() { return 0; }], ['""', function() { return ""; }], ["[[]]", function() { return [[]]; }], ["[]", function() { return []; }], ['"0"', function() { return "0"; }], ["[0]", function() { return [0]; }], ["[1]", function() { return [1]; }], ['"1"', function() { return "1"; }], ["1", function() { return 1; }], ["true", function() { return true; }], ["-1", function() { return -1; }], ['"-1"', function() { return "-1"; }], ["null", function() { return null; }], ["undefined", function() { return undefined; }], ["Infinity", function() { return Infinity; }], ["-Infinity", function() { return -Infinity; }], ['"false"', function() { return "false"; }], ['"true"', function() { return "true"; }], ["{}", function() { return {}; }], ["NaN", function() { return NaN; }]];var canvas = document.getElementById("drawCanvas");var ctx = canvas.getContext("2d");var n = vals.length;var r = 20; // diameter of grid squaresvar p = 60; // padding space for labels// color grid cellsfor (var i = 0; i <n; i++) {var v1 = vals[i][1]();for (var j = 0; j < n; j++) {var v2 = vals[j][1]();var eq = cmp(v1, v2);ctx.fillStyle = eq ? "orange" :"white";ctx.fillRect(p+i*r, p+j*r, r, r);}}// draw labelsctx.fillStyle = "black";var f = 12;ctx.font = f + "px Helvetica";for (var i = 0; i < n; i++) {var s = vals[i][0];var w = ctx.measureText(s).width;ctx.save();ctx.translate(p+i*r+r/2-f*0.4, p-w-2);ctx.rotate(3.14159/2);ctx.fillText(s, 0, 0);ctx.restore();}for (var i = 0; i < n; i++) {var s = vals[i][0];var w = ctx.measureText(s).width;ctx.fillText(s, p-w-2, p+i*r+r/2+f*0.4);}// draw grid linesctx.beginPath();ctx.strokeStyle = "black";for (var i = 0; i <= n; i++) {ctx.moveTo(p+r*i, p);ctx.lineTo(p+r*i, p+r*n);ctx.moveTo(p, p+r*i);ctx.lineTo(p+r*n, p+r*i);}ctx.stroke();

Summary

Operator == in JavaScript is completely intransitive and flawed. And although its flaws are more than covered by the use of === it is not as awful as some of the tables show…

Update

It was more difficult, but we managed to make a truth table for the operator < ( look at jsfiddle ):
Don't make (un)equals in JavaScriptlook worse than they are
The truth table for a comparison operator is shaped like a triangle if you put its values in the right order.
(By the way, the principle of ordering values in a truth table for comparison, is not always appropriate for making equality tables.)

P.S. from the translator

I would like to draw your attention to the discussion of this article at Reddit In fact, the original table organization has quite good reasons :
Don't make (un)equals in JavaScriptlook worse than they are

You may also like