🔖

【JavaScript】??(Null合体演算子)と || の違いを解説

に公開1

はじめに

JavaScriptで「値がないときにデフォルト値を使う」ための書き方として、
次のようなコードを見たことはありませんか?

const name = input || 'ゲスト';

このような書き方は、||(論理和)を使った「ショートサーキット評価」と呼ばれます。
左側の値が「falsy(偽とみなされる値)」なら、右側の値が使われるという便利な構文です。


詳しくは、以下の記事で解説しています👇
JavaScriptのtruthyとfalsyとは?ショートサーキット評価もあわせて解説


しかし、実務では「空文字('')や0は有効な値として扱いたい」というケースもあります。

そんなときに便利なのが、Null合体演算子 ?? です。

??|| の違いとは?

||(論理和)と ??(Null合体演算子)は、どちらも「値がなければ代わりの値を使う」目的で使われますが、「値がない」と判断する基準が異なります。

|| の場合

|| は、変数の値が falsyfalse, 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

junerjuner

むしろ ?? よりも ??= の方がよく使うがありますね。

let array = null;
if (value1 === "test")
  (array ??= []).push("test");