JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="results">

</ul>

JavaScript

function addResult(val) {
	  var li = document.createElement("li");
    li.appendChild(document.createTextNode(new String(val)));
    document.getElementById("results").appendChild(li);
}

//---------------- Basic "primitive" boolean logic
var x = false;

// Non-strict should work. 
addResult(x == true ? "x == true holds" : "x == true fails");
addResult(x == false ? "x == false holds" : "x == false fails");
// Good. Surely strict equals also works
addResult(x === true ? "x == true holds" : "x == true fails");
addResult(x === false ? "x == false holds" : "x == false fails");
// Also good. Surely if agrees
if (x) { addResult("x is true"); } else { addResult("x is false"); };
if (!x) { addResult("!x is true"); } else { addResult("!x is false"); };
if (!!x) { addResult("!!x is true"); } else { addResult("!!x is false"); };
// And ternary
addResult(x ? "x ternary evals true branch" : "x ternary evals false branch");

addResult("--------------------");

//---------------- Object boolean logic
x = new Boolean(false)

// Non-strict should work. 
addResult(x == true ? "x == true holds" : "x == true fails");
addResult(x == false ? "x == false holds" : "x == false fails");
// Good. Surely strict equals of course won't work
addResult(x === true ? "x == true holds" : "x == true fails");
addResult(x === false ? "x == false holds" : "x == false fails");
// Also good. Surely if agrees
if (x) { addResult("x is true"); } else { addResult("x is false"); };
if (!x) { addResult("!x is true"); } else { addResult("!x is false"); };
if (!!x) { addResult("!!x is true"); } else { addResult("!!x is false"); };
// Well ternary then
addResult(x ? "x ternary evals true branch" : "x ternary evals false branch");
// Nope, that is because x is of **type** (not class) Object and in ES 5.1 that evaluates to true for objects.