Do not make (in) equality in JavaScript look worse than they are.

From time to time I meet publications where it is told which of the values ​​of the operator == equivalent (as, for example, here ). Often, this stipulates that the data in the table is not very well organized.

I agree, such tables are needed to better navigate the imperfections of the operator ... only imperfections in the organization of the data in such tables themselves, in my opinion, further complicate the situation. Here, for example, the table from the link above:


')
Nightmare, comrades! .. As for me, there is more confusion in the order of rows / columns.

By grouping them by the presence of intersections, we get a clearer picture:



It's easier to navigate, isn't it? And yet such an organization of the table allows you to immediately see the imperfections == .

Code

Below is the code I used to create my version of this table. It is available on 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 squares var p = 60; // padding space for labels // color grid cells for (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 labels ctx.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,pw-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, pw-2, p+i*r+r/2+f*0.4); } // draw grid lines ctx.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

The == operator in JavaScript is completely intransitive and flawed. And although its shortcomings are more than covered by the use of === , it is not as terrible as shown in some tables ...

Update

It was harder, but still it turned out to make a truth table for the operator < ( look at jsfiddle ):



The truth table for the comparison operator is shaped like a triangle, if its values ​​are arranged in the correct order.

(By the way, the principle of ordering values ​​in a truth table for comparison is not always suitable for compiling equality tables.)

PS from translator

I would like to draw your attention to the discussion of this article on Reddit . In fact, the original organization of the table has quite a good reason :