falsy な値は 6 つだけと覚えてよいですか

入門段階では false と 0 と空文字と null と undefined と NaN の 6 つで十分です。厳密には -0 と BigInt の 0n も偽になりますが、どちらも実務で意識する場面は限られます。6 つ以外は全部真、と覚えるのが実用的です。

Boolean() と !! はどちらを使うべきですか

結果は同じなので、既存のコードに合わせるのが第一です。初心者どうしのレビューでは意図が読み取りやすい Boolean() を、短さを重視するチームでは !! を使う傾向があります。1 つのファイルで混在させないことだけ気を付けてください。

空配列が真になるのはなぜですか

配列やオブジェクトは中身が空でも値として存在しているためです。falsy になるのは 6 つの値だけで、そこに空配列は含まれません。配列が空かどうかを調べたいときは works.length を見てください。

真偽値と falsy な値｜コードで実践

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

真偽値は true と false の 2 つだけの型です

偽として扱われる値は false 0 "" null undefined NaN の 6 つです

Boolean(値) と !!値 はどちらも真偽値への変換です

真偽値と falsy な値とは

真偽値の型と、偽として扱われる 6 つの値を押さえます。空文字や 0 が偽になる理由を説明できるようになり、未入力チェックの下ごしらえができる回です。

真偽値は 2 つしかない

true と false の 2 つだけを値に持つ型が 真偽値 です。typeof の結果は "boolean" になります。

const published = true;
const draft = false;
console.log(typeof published); // "boolean"

真偽値は、第4章の条件分岐で「この処理をするかしないか」を決める材料になります。プロフィールサイトで言えば、作品を公開するかどうか、入力欄が埋まっているかどうかといった判断に使います。

引用符で囲んだ "true" は真偽値ではなく文字列です。この 2 つは別物なので混同しないでください。

console.log(typeof true);   // "boolean"
console.log(typeof "true"); // "string"

注意文字列の "false" は、後で見るとおり真として扱われます。中身が false という文字でも、空でない文字列は真です。

truthy と falsy

JavaScript では、真偽値ではない値も真偽値として評価されます。真として扱われる値を truthy、偽として扱われる値を falsy と呼びます。

偽になる値は次の 6 つだけです。これ以外はすべて真になります。

falsy な値	型	説明
`false`	boolean	真偽値の偽そのもの
`0`	number	数値のゼロ。`-0` も偽
`""`	string	空文字。空白 1 文字は真
`null`	object	意図的に空を表す値
`undefined`	undefined	まだ値が入っていない状態
`NaN`	number	数値に変換できなかった結果

6 つだけと聞くと少なく感じますが、実際のコードでは頻繁に登場します。特に 0 と "" が偽になることは、入力チェックを書くときに必ず意識する必要があります。

反対に、うっかり真だと気付きにくい値もあります。

一見偽に見える値	実際	理由
`"0"`	真	空でない文字列だから
`"false"`	真	空でない文字列だから
`" "`	真	空白も 1 文字ある
`[]`	真	空配列もオブジェクト
`{}`	真	空オブジェクトも値がある

配列とオブジェクトは中身が空でも真です。「空の配列だから偽だろう」と考えると判定を間違えます。

覚え方 falsy な 6 つを暗記して、それ以外は全部真と考える。この覚え方なら空配列や "0" に引っかかりません。

真偽値に変換する

値を真偽値に変換する方法は 2 つあります。

console.log(Boolean("山田 太郎")); // true
console.log(Boolean(""));          // false
console.log(!!"山田 太郎");        // true
console.log(!!"");                 // false

Boolean(値) は前のレッスンの Number() String() と同じ形の変換関数です。!!値 は否定演算子 ! を 2 回重ねたもので、1 回目で真偽が反転し、2 回目で元に戻ることで真偽値だけが残ります。

結果はどちらも同じです。読みやすさを優先するなら Boolean()、短く書きたいなら !! を選びます。チームによってどちらかに統一されていることが多いので、既存のコードに合わせるのが無難です。

変換の結果を並べてみる

console.log(Boolean(0));         // false
console.log(Boolean(1));         // true
console.log(Boolean(-1));        // true 0 以外の数値は真
console.log(Boolean(null));      // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN));       // false
console.log(Boolean([]));        // true

-1 のような負の数も真です。偽になる数値は 0 と NaN だけだと覚えてください。

未入力チェックの下ごしらえ

真偽値と falsy を学ぶ目的は、第9章のフォーム入力チェックにあります。入力欄の値は、何も入力されていないとき空文字 "" として届きます。空文字は falsy なので、Boolean(値) が false になったら未入力だと判断できます。

function hasInput(value) {
  return Boolean(value);
}

console.log(hasInput("山田 太郎")); // true 入力あり
console.log(hasInput(""));          // false 未入力
console.log(hasInput(null));        // false 値が無い

この hasInput が、第9章で書く「名前が未入力ならエラーメッセージを出す」という処理の土台になります。今の段階では判定結果を返すところまでで十分です。判定結果を使って処理を分けるのが第4章、画面に反映するのが第9章です。

数値を扱うときだけは注意が必要です。0 も falsy なので、「0 という値が入力されている」場合と「何も入力されていない」場合を区別できません。作品数が 0 件でも入力済みとして扱いたいなら、真偽値への変換ではなく、この章の最後で扱う null や undefined との比較を使います。

現場の話入力チェックのバグで最も多いのが、数量に 0 を入れたのに未入力と判定されるパターンです。数値の入力欄では falsy 判定をそのまま使わない、と覚えておいてください。

真偽値を返す関数の名付け

真偽値を返す関数には、is has can のいずれかで始まる名前を付けるのが慣習です。isPublished hasInput canEdit のような形です。名前を見ただけで戻り値が真偽値だと分かるため、呼び出す側が結果の扱いを迷いません。

反対に check や status のような名前は、真偽値なのか文字列なのかが名前から読み取れません。前のレッスンで学んだ typeof で確かめる手間が増えるだけなので、真偽値を返すと決めたら名前でも伝えるようにしてください。

よくある間違い

1 つ目は、文字列の "false" を偽だと思い込むケースです。

const flag = "false";
console.log(Boolean(flag)); // true 空でない文字列は真

文字列で受け取った真偽の値は、flag === "true" のように文字列として比べる必要があります。

2 つ目は、空配列を偽だと思い込むケースです。

const works = [];
console.log(Boolean(works));        // true 空配列も真
console.log(Boolean(works.length)); // false 長さ 0 は偽

配列が空かどうかを調べたいときは、要素数である works.length を見ます。配列の詳細は第5章で扱います。

3 つ目は、0 が入力された数値を未入力と判定してしまうケースです。

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

数値では 0 が有効な値になることが多いため、falsy 判定ではなく viewCount === undefined のような比較で「値があるか」を調べます。この使い分けが、次のレッスンの null と undefined につながります。

真偽値と falsy な値