JSFiddle - React, Tailwind, and code Playground

by Bhavin Surela

HTML

<h1> Equal operator comparison </h1>
<h2>Double Equals</h2>
<table id ="double-equals" class="table table-striped">
    <thead><tr><th>Comparison</th><th>Result</th></tr></thead>
    <tbody></tbody>
</table>
<p class="well">
    Double equals is not the same as triple equals when it comes to javascript. Notice that some things are unexpectedly true exmaple 0 == "" is true when only compared with double equals vs its false when compared with triple equals. Double equals can somehow be helpful when you want to check if the value is either null or undefined you can quickly just do if(val == null) instead of if(val == null || val == undefined). Also notice that double equals does not check for the data type behind the comparator, example 2 == '2' is true but not true in triple equals.
</p>
<h2>Triple Equals</h2>
<table id ="triple-equals" class="table table-striped">
      <thead><tr><th>Comparison</th><th>Result</th></tr></thead>
    <tbody></tbody>
</table>
<p class="well">
    Triple equals is much tighter comparison in javascript, it also checkes the data type example see that 2 === '2' is false while its true in double equals
</p>
<hr>
<h1> Or (||) operator comparison </h1>
<table id ="or" class="table table-striped">
      <thead><tr><th>Comparison</th><th>Result</th></tr></thead>
    <tbody></tbody>
</table>
  <p class="well">
      This works like standard || or operator, if the value of the first comparator does not equals to true it will select the other value. See section <a href="#truthy-value">truthy value</a> for which values return false when asked for boolean value.
</p>  
<h1 name="truthy-value" id="truthy-value"> Truthy value </h1>
<table id ="truthy" class="table table-striped">
      <thead><tr><th>Comparison</th><th>Result</th></tr></thead>
    <tbody></tbody>
</table>

CSS

.false{
    background-color:red !important;
}

.true{
    background-color:green !important;
}

JavaScript

var valuesStr=[];
function begin(){

    var values = [null,undefined,0,"",NaN,'2',2];
    valuesStr=["null","undefined","0","'' (empty string)","NaN","'2'","2"];
    
    console.log("begin");
    for(var i =0;i<values.length;i++){
        for(var j =0;j<values.length;j++){
            var result = values[i] == values[j];
            var row = "<tr><td>"+toString(i) +" == "+ toString(j)+"</td>";
            row+= "<td class='"+result+"'>"+result+"</td></tr>";
            $("#double-equals >tbody").append(row);
            
        }   
    }
    
    for(var i =0;i<values.length;i++){
        for(var j =0;j<values.length;j++){
            var result = values[i] === values[j];
            var row = "<tr><td>"+toString(i) +" === "+ toString(j)+"</td>";
            row+= "<td class='"+result+"'>"+result+"</td></tr>";
            $("#triple-equals > tbody").append(row);
            
        }   
    }
    
    values = [{},null,undefined,0];
    valuesStr =["[object Object]","null","undefined","0"];
    
    values = [null,undefined,0,"",NaN,'2',2];
    valuesStr=["null","undefined","0","'' (empty string)","NaN","'2'","2"];
    
    for(var i =0;i<values.length;i++){
        for(var j =0;j<values.length;j++){
            var result = values[i] || values[j];
            var row = "<tr><td>"+toString(i) +" || "+ toString(j)+"</td>";
            if(result === ''){
                result ="'' (empty string)";
            }else if(result ==='2'){
                result ="'2'";
            }else if(result === 2){
                result = 2;
            }
            row+= "<td>"+result+"</td></tr>";
            $("#or > tbody").append(row);
            
        }   
    }
    
    
    for(var i =0;i<values.length;i++){
        var result = false;
        if(values[i]){
            result = true;
        }else{
            result = false;
        }
        var row = "<tr><td> if ( "+toString(i) +" )</td>";
        row+= "<td class='"+result+"'>"+result+"</td></tr>";
     ...