0なのに「未入力」になる？JavaScriptの||と??を比べよう

件数が0なのに「未入力」と表示された。代わりの値を選ぶ式に||を使い、0まで置き換えていないか確認してみよう。JavaScriptには、nullとundefinedだけを置き換える??もあるよ。

このページの目標は、代替値を選ぶ条件の違いを理解すること。ブラウザだけで、六つの値を選ぶ作例を試せる。入力や保存はしないよ。

||は、左側が偽として扱われると右側を返す

const count = 0;
const label = count || "未入力";
console.log(label); // "未入力"

||は論理ORと呼ばれる演算子。ここでは、左側の値が偽として扱われる場合に右側の値を返す。0だけでなくfalseや空文字列も、その対象になる。

返ってくるものが、常にtrueやfalseというわけではない。今回なら文字列の「未入力」が返るよ。値があるかどうかを表示の都合だけで決めず、0に意味があるかを先に考えよう。

??はnullとundefinedの場合だけ右側を返す

const count = 0;
const label = count ?? "未入力";
console.log(label); // 0

??はnull合体演算子。左側がnullまたはundefinedの場合だけ、右側を返す。nullは値がない状態を表すために使う値、undefinedは値が設定されていない場合などに現れる値だよ。

0・false・空文字列を、そのまま残せることが違いになる。残した空文字列が画面上で何も表示しないなら、その表示が適切かは別に決める必要があるね。

六つの値で結果を比べる

| 左側の値 | ||で代替値を選ぶと | ??で代替値を選ぶと | | --- | --- | --- | | 0 | 未入力 | 0 | | false | 未入力 | false | | 空文字列 | 未入力 | 空文字列 | | null | 未入力 | 未入力 | | undefined | 未入力 | 未入力 | | NaN | 未入力 | NaN |

NaNは数値の計算や変換がうまくいかなかった場合などに使われる特別な値。??はNaNを直す機能ではないので、数として使えるかは別の検証が必要だよ。

作例の表示を切り替えよう

「左側の値」から0、false、空文字列を順に選び、二つの結果を見比べる。空文字列は区別しやすいよう、作例では引用符付きで表示している。

次にnull、undefined、NaNを選ぶ。代替値に変わる条件が違うことを確認したら、「最初から試す」で0へ戻そう。任意のコードを実行する入力欄はなく、選んだ値だけを比較する作りだよ。

入力の妥当性を調べる処理とは分ける

??を使えば、入力値が必ず正しい種類や範囲になるわけではない。文字列の"0"と数値の0も別の値。数への変換や条件の確認は、表示の代替値を選ぶ処理と分けよう。

編集部ではNode.jsとChromiumで六つの結果とリセットを確認した。変数の種類の基本はletとconst、文字列から数や真偽値を扱う前の確認はdatasetの型も参照してね。