JSFiddle - React, Tailwind, and code Playground

by dcdruck

HTML

<p id="target">
  <dl>
      <dt>[]</dt>
      <dd id="empty_truthy"></dd>
      <dt>["something","else"]</dt>
      <dd id="nonempty_truthy"></dd>
      <dt>[] && true</dt>
      <dd id="empty_truthyand"></dd>
      <dt>["something","else"] && true</dt>
      <dd id="nonempty_truthyand"></dd>
      <dt>[] == true</dt>
      <dd id="empty_truish"></dd>
      <dt>["something","else"] == true</dt>
      <dd id="nonempty_truish"></dd>
      <dt>[] === true</dt>
      <dd id="empty_true"></dd>
      <dt>["something","else"] === true</dt>
      <dd id="nonempty_true"></dd>
  </dl>
</p>

CSS

dd { margin:0 0 0 20px; }
dd.true { color: green; }
dd.false { color: red; }
dt { margin:0 0 0 5px; color: gray; }
dt:after { content: ":"; }

JavaScript

function setTrue(a) { a.innerHTML = a.className = "true"; };
function setFalse(a) { a.innerHTML = a.className = "false"; };

function isTruthy(a,b) { if (a) setTrue(b); else setFalse(b); };
function isTrue(a,b) { if (a === true) setTrue(b); else setFalse(b); };
function isTruish(a,b) { if (a == true) setTrue(b); else setFalse(b); };
function isTruthyAnd(a,b) { if (a && true) setTrue(b); else setFalse(b); };

var emptyArr = [], nonemptyArr = ["something","else"];

isTruthy(emptyArr,document.getElementById("empty_truthy"));
isTruthy(nonemptyArr,document.getElementById("nonempty_truthy"));
isTruthy(emptyArr,document.getElementById("empty_truthyand"));
isTruthy(nonemptyArr,document.getElementById("nonempty_truthyand"));
isTruish(emptyArr,document.getElementById("empty_truish"));
isTruish(nonemptyArr,document.getElementById("nonempty_truish"));
isTrue(emptyArr,document.getElementById("empty_true"));
isTrue(nonemptyArr,document.getElementById("nonempty_true"));