【JavaScript】??(Null合体演算子)と || の違いを解説
はじめに
JavaScriptで「値がないときにデフォルト値を使う」ための書き方として、
次のようなコードを見たことはありませんか?
const name = input || 'ゲスト';
このような書き方は、||
(論理和)を使った「ショートサーキット評価」と呼ばれます。
左側の値が「falsy(偽とみなされる値)」なら、右側の値が使われるという便利な構文です。
詳しくは、以下の記事で解説しています👇
JavaScriptのtruthyとfalsyとは?ショートサーキット評価もあわせて解説
しかし、実務では「空文字(''
)や0
は有効な値として扱いたい」というケースもあります。
そんなときに便利なのが、Null合体演算子 ??
です。
??
と ||
の違いとは?
||
(論理和)と ??
(Null合体演算子)は、どちらも「値がなければ代わりの値を使う」目的で使われますが、「値がない」と判断する基準が異なります。
||
の場合
||
は、変数の値が falsy(false
, 0
, ''
, null
, undefined
など)であれば、右側の値を使います。
const name = '' || 'ゲスト'; // → 'ゲスト'
const count = 0 || 10; // → 10
つまり、「0」や「空文字」など有効な値も「ないもの」とみなされてしまうため、注意が必要です。
??
の場合
??
は、変数の値が null
または undefined
のときだけ、右側の値を使います。
const name = '' ?? 'ゲスト'; // → ''
const count = 0 ?? 10; // → 0
このように、??
を使うと「値が明確に存在しない場合(null/undefined)」だけを補完できるため、
「0」や「空文字」などを有効な入力として扱いたいケースで役立ちます。
どちらを使うべき?
-
||
→ 空文字や 0 も「未入力」として扱いたいときに使う -
??
→ 空文字や 0 は有効な値として扱い、null / undefined だけを除外したいときに使う
例えば、フォーム入力や API のレスポンス処理などで「0 や空文字は使いたい」場面では ??
の方が安全です。
TypeScriptでも使える?
TypeScriptでも ??
と ||
は同じように使えます。
const count = 0;
const result1 = count || 10; // → 10(0がfalsyなので10になる)
const result2 = count ?? 10; // → 0(0は有効な値として扱われる)
TypeScriptでは、変数に「この値は数値かもしれないし、nullかもしれない」といった型を指定できます。
// APIから取得した値など、nullの可能性がある場合
const userAge: number | null = getUserAge(); // 20 または null が入る
// ??を使って安全にデフォルト値を設定
const displayAge = userAge ?? 18; // nullの場合のみ18を使用
このように、??
を使うことで「値が本当にない場合だけ」デフォルト値を適用できるため、TypeScriptでも安全なコードが書けます。
まとめ
目的 | 適した演算子 | 理由 |
---|---|---|
falsy全般を除外 | || |
0 , '' , false も除外される |
null / undefined だけ除外 | ?? |
0 や空文字は保持される |
おわりに
「値がなければデフォルト値を使う」という書き方はとても便利ですが、
||
と ??
では「どの値を“ない”とみなすか」の基準が異なるため、正しい使い分けが重要です。
例えば 0
や ''
を有効な値として扱いたい場合は、??
を選ぶことで意図しない上書きを防げます。
文脈に応じて適切な演算子を選ぶことで、コードの意図がより明確になり、予期しない動作を防げます。
本記事が参考になれば幸いです。
Discussion
むしろ
??
よりも??=
の方がよく使うがありますね。