真偽値と falsy な値

解説

このレッスンで分かること

• 偽として扱われる値は false 0 "" null undefined NaN の 6 つだけです
• Boolean(値) を通すと、どんな値も true か false のどちらかになります

入力されているかどうかを 1 つの式で決めたい

プロフィールの自己紹介欄が埋まっているかどうかを知りたいとします。入力欄は、何も書かれていなければ空文字 "" として値が届きます。文字数を数える方法もありますが、JavaScript には値そのものを真か偽かで見る仕組みがあります。

真か偽かを表す型が 真偽値 です。値は true と false の 2 つだけで、typeof の結果は "boolean" になります。引用符で囲んだ "true" は真偽値ではなく文字列なので、別物として扱われます。

const isPublic = true;
console.log(typeof isPublic); // "boolean"
console.log(typeof "true");   // "string" 引用符付きは文字列

真偽値ではない値も、真か偽かとして評価されます。真として扱われる値を truthy、偽として扱われる値を falsy と呼びます。偽になる値は次の 6 つだけで、これ以外はすべて真です。

うっかり真だと気付きにくいものもあります。"0" も "false" も " " も、空でない文字列なので真です。空の配列 [] と空のオブジェクト {} も真になります。中身が空だから偽だろう、と考えると判定を間違えます。

解説

覚え方 falsy な 6 つだけを覚えて、それ以外は全部真と考えます。この順番で覚えると "0" や空の配列に引っかかりません。

Boolean で真偽値に直す

Boolean(値) は、前のレッスンの Number() String() と同じ形の変換関数です。falsy な 6 つなら false、それ以外なら true を返します。

console.log(Boolean("山田 太郎")); // true
console.log(Boolean(""));          // false 未入力
console.log(Boolean(0));           // false
console.log(Boolean(-1));          // true 0 以外の数値は真
console.log(Boolean([]));          // true 空の配列も真

否定演算子 ! を 2 つ重ねた !!値 も同じ結果になります。1 回目で真偽が反転し、2 回目で元に戻るため、真偽値だけが残ります。読みやすさを取るなら Boolean()、短さを取るなら !! です。どちらを使うかはチームで統一されていることが多いので、既存のコードに合わせるのが無難です。

戻り値は文字列ではありません。false と "false" は別の値で、前者は falsy、後者は空でない文字列なので truthy です。

数値の 0 だけは要注意

0 も falsy なので、真偽値への変換だけでは「0 という値が入力されている」場合と「何も入力されていない」場合を区別できません。

const viewCount = 0;
console.log(Boolean(viewCount)); // false 入力されているのに偽

閲覧数や作品数のように 0 が正しい値になりうる欄では、falsy 判定をそのまま使えません。入力チェックのバグで最も多いのが、数量に 0 を入れたのに未入力と判定されるパターンです。値が有るか無いかだけを見たいときは、真偽値への変換ではなく、次のレッスンで扱う null や undefined そのものと比べます。

1. 関数名は hasInput、引数は value (任意の値) の 1 つ
2. Boolean または !! を使って真偽値に変換して返す
3. 戻り値は true または false の真偽値。文字列ではない