JavaScriptのtruthy/falsyな値は、trueあるいはfalseと解釈されるだけで、値自体は変換されない。

そもそもtruthy/falsyとは

truthy、あるいはfalsyは、真偽値を評価するような式の中で、trueあるいはfalseとみなされる値だ。

具体的には、以下の値はfalsy、それ以外の値はtruthyと判断される。

  • false
  • null
  • undefined
  • NaN
  • 0
  • -0
  • 0n
  • ''
  • document.all
js
if (!false) console.log("false");

if (!null) console.log("null");

if (!undefined) console.log("undefined");

if (!0) console.log("0");

if (!-0) console.log("-0");

if (!0n) console.log("0n");

if (!NaN) console.log("NaN");

if (!"") console.log("''");

/**
 * 出力
 * index.js:2 false
 * index.js:4 null
 * index.js:6 undefined
 * index.js:8 0
 * index.js:10 -0
 * index.js:12 0n
 * index.js:14 NaN
 * index.js:16 ''
 */

気をつけたい落とし穴

truthy/falsyな値は、条件文を簡潔に書ける一方、適当に使うと落とし穴にハマる。もといハマった。恥ずかしい思いをした。

true/falseと等価ではない

trulyな値、falsyな値が真偽値として扱われるのは、その値が単体で評価される場合である。例えば1 === trueは真にはならず、0 === falseも真にはならない。

true/falseには変換されない

trulyな値、falsyな値は、trueあるいはfalseとして扱われるだけで、値が変換されるわけではない。例えばReactではcount !== 0 || <Component />のように書かけるが、見よう見まねでcount || <Component />みたいにすると0が表示されてしまう。

また、余談だが&&や||でコンポーネントの表示を切り替えられるかどうか（真偽値が返された時に何も表示しないかどうか）は、使うフレームワークによる。注意したい。

気づいたら、Beauty & Stupidの替え歌を頭の中で歌っていた。懐かしい。

参考資料