Double vs Triple comparisons

by Alon Rotem

HTML

<!-- =======================================================
This example shows the difference between double and triple equality comparisons in Javascript.
By chancing the radion buttons, the table gets re-evaluated.
You can see that Triple mode is very strict. Only objects of the same type and the same value are considered equel.
Double mode is much more loose. For example the string "1" and the boolean true are considered equal.
======================================================= -->
Comparison: 
<input type="radio" name="equalType" value="triple" checked>
    Triple ===
</input>
<input type="radio" name="equalType" value="double">
    Double ==
</input>
<div id="tableContainer"></div>

CSS

body {
    font-family: verdana;
    font-size: 8pt;
}
#tableContainer{
    margin-top: 30px;
}
.equal {
    background-color: gray;
}
.tdHeaderCol {
    text-align: right;
}
.tdContent {
    border: 1px solid black; 
    height: 20px;
    min-width: 20px;
}
.rotate {
    max-width: 20px;
    height: 20px;
    -moz-transform: rotate(-90deg);
    /* -webkit-transform: rotate(-90deg); */
    -o-transform: rotate(-90deg);
    writing-mode: tb-rl;
    filter: flipv fliph;
    position: relative;
    top: -21px;
}

JavaScript

var comparables = [true, false, 1, 0 , -1, "true", "false", "1", "0", "-1", "", null, undefined, Infinity, -Infinity, [], {}, [0],  [1], NaN];

$( document ).ready(function (){
    var content = "<table id='compareTbl'>";
    var titleRow = "<tr><td></td>";
    var otherRows = "";
    for(var i=0; i < comparables.length; i++)
    {
        otherRows += '<tr>';
        titleRow += '<td class="rotate">'+printItem(comparables[i])+'</td>';
        otherRows += '<td class="tdHeaderCol">'+printItem(comparables[i])+'</td>';
        for(var j=0; j < comparables.length; j++)
        {
            otherRows += '<td class="tdContent"></td>';
        }
        otherRows += '</tr>';
    }
    content += titleRow;
    content += otherRows;
    content += "</table>"
    $('#tableContainer').append(content);
    $('input:radio[name="equalType"]').change(reEvaluate);
    reEvaluate();
});
    
function reEvaluate()
{
    var table = $("#compareTbl")[0];
    for (var i = 1, row; row = table.rows[i]; i++) {
       for (var j = 1, col; col = row.cells[j]; j++) {
           if($("input:radio[name=equalType]:checked").val() == "triple")
           {
               row.cells[j].className = "tdContent" + ((comparables[i-1] === comparables[j-1])? " equal" : "");
           }
           else
           {
               row.cells[j].className = "tdContent" + ((comparables[i-1] == comparables[j-1])? " equal" : "");
           }
       }  
    }
}

function printItem(item){
    if(typeof(item) == "string")
        return "\"" + item + "\"";
    else if ($.isArray(item))
        return "[" + item + "]";
    else if (item === null)
    	return "null";
    else if (typeof(item) == "object")
        return "{}";
    return item;
}