Truthy

JavaScriptは、特定の場所(例えば、if 条件文とbooleanの&& || オペレータ)で、Trueと評価される値(truthy)の概念を持っています。次に示すものは、JavaScriptにおいてtruthyです。例えば0以外の数値はtruthyです。

if (123) { // Will be treated like `true`
  console.log('Any number other than 0 is truthy');
}

truthyでないものは、falsyと呼ばれます。

これは開発者のための便利なリファレンスです。

変数の型	falsyな値	truthyな値
boolean	false	true
string	'' (空文字列)	その他の文字列
number	0 NaN	その他の数値
null	常にfalsy	なし
undefined	常にfalsy	なし
その他のオブジェクト({}や[]といった空のものも含む)	なし	常にtruthy

Booleanとして扱うことを明示的にする

The !! pattern

一般的に、booleanとして扱われる値を、それを本当のboolean(true|false)に明示的に変換することは、良いことです。あなたは、!!を使って値を本当のbooleanに簡単に変換できます。例えば、!!fooです。これは単に!を2回使っただけです。最初の!は値をbooleanに変換しますが、その論理値を反転します。2つ目の!は、その値を本来の値にマッチするよう再度反転させます(例えば、 truthy -!> false -!> true)。

これはあらゆる場面で共通的に使えるパターンです。

// 値を他のものに移す
const hasName = !!name;

// オブジェクトのメンバとして利用する
const someObj = {
  hasName: !!name
}

// 例： ReactJS JSX
{!!someName && <div>{someName}</div>}