JavaScriptのNull合体演算子(??)でデフォルト値を安全に

もっと賢いデフォルト値の指定

JavaScriptには昔から value || fallback というデフォルト値の書き方があります。たいていはうまく動くのですが、実はちょっとしたクセがあります。「falsyな値」をすべて「値がない」とみなしてしまうのです。つまり 0、''、false のように、それ自体が正しい答えであってもフォールバック側が発動してしまいます。

そこで登場するのが Null合体演算子 ?? です。?? 演算子はフォールバックを返すのが null か undefined のときだけ。これで先ほどの問題が解決します。

const a = 0 ?? 10;
const b = '' ?? 'empty';
const c = null ?? 'default';
const d = undefined ?? 'default';

console.log(a, b, c, d);

0 も '' もそのまま残る。消えるのは null と undefined だけ。Null合体演算子はこれが全てです。

|| だけでは足りない理由

?? 演算子がそもそもなぜ生まれたのか。その背景には、|| による“よくあるバグ”があります。

function createUser(options) {
  const volume = options.volume || 100;
  const nickname = options.nickname || 'Anonymous';
  return { volume, nickname };
}

console.log(createUser({ volume: 0, nickname: '' }));

ユーザーはボリューム 0（無音）と空のニックネームを指定しているのに、|| では「未指定」と「falsyな値」を区別できないため、どちらも勝手に上書きされてしまいます。

ここで ?? の出番です。

function createUser(options) {
  const volume = options.volume ?? 100;
  const nickname = options.nickname ?? 'Anonymous';
  return { volume, nickname };
}

console.log(createUser({ volume: 0, nickname: '' }));
console.log(createUser({}));

これで 0 や '' はそのまま通り抜け、本当に値が入っていないフィールドにだけデフォルトが当たるようになりました。実務ではほぼこの挙動が欲しいはずです。

イメージで掴む ?? 演算子

?? が聞いているのは1つだけ。左辺は null または undefined か? それ以外は対象外です。

左辺の値	left || right の結果	left ?? right の結果
null	右辺	右辺
undefined	右辺	右辺
0	右辺	左辺 (0)
''	右辺	左辺 ('')
false	右辺	左辺 (false)
NaN	右辺	左辺 (NaN)
任意のオブジェクト	左辺	左辺

データに意味のある falsy 値(空文字やゼロなど)が含まれるなら ?? を選びましょう。逆に、falsy な値をまとめて弾きたい(短い文字列や件数ゼロなども一律に無効扱いしたい)場合は || の出番です。そういうケースも無くはないですが、みんなが思っているほど多くはありません。

短絡評価の挙動

|| や && と同じで、?? も短絡評価されます。左辺が nullish でなければ、右辺はそもそも評価されません。

function expensiveDefault() {
  console.log('computing default...');
  return 'fallback';
}

const a = 'real value' ?? expensiveDefault();
const b = null ?? expensiveDefault();

console.log(a);
console.log(b);

expensiveDefault() が実行されるのは b のときだけ、1回きりです。フォールバックが関数呼び出しやネットワークリクエストなど、必要ないときは走らせたくない処理のときに重宝します。

オプショナルチェーンとの組み合わせ

?? と ?. はどちらも ES2020 で追加された機能で、セットで使うことを前提に設計されています。オプショナルチェーンは途中で値が無ければ undefined を返しながらプロパティをたどり、そこに Null合体演算子を重ねれば、いい感じのデフォルト値を差し込めます。

const response = {
  user: {
    profile: null,
  },
};

const theme = response?.user?.profile?.theme ?? 'light';
const tags = response?.user?.posts?.[0]?.tags ?? [];

console.log(theme);
console.log(tags);

この組み合わせがないと、同じコードは && のチェックを延々と連ねたり、try/catch で囲んだりと、かなり泥臭くなります。これらを使えば、安全なアクセスとまっとうなデフォルト値の設定が1行で書けてしまいます。

Null合体代入 ??=

a ??= b は、a が null または undefined のときだけ b を代入します。いわゆる論理Null合体代入演算子で、ショートサーキット評価が効きます。つまり、a にすでに値が入っていれば、右辺は評価すらされません。

function withDefaults(options) {
  options.retries ??= 3;
  options.timeout ??= 5000;
  options.verbose ??= false;
  return options;
}

console.log(withDefaults({ timeout: 10000 }));
console.log(withDefaults({ verbose: false, retries: 0 }));

verbose: false と retries: 0 がそのまま残っている点に注目してください。??= が埋めるのは、本当に値が無いプロパティだけです。||= なら両方とも上書きされてしまうので、挙動の違いがはっきりわかります。

演算子の優先順位とカッコのルール

?? は、カッコなしで || や && と混ぜることを意図的に禁止しています。次のコードは SyntaxError になります。

const x = a || b ?? c;   // SyntaxError

言語の設計者としては、優先順位が紛らわしいので明示的に書かせたほうがいい、という判断をしたわけです。括弧を付けてあげればちゃんと動きます。

const a = null;
const b = 0;
const c = 'fallback';

const x = (a || b) ?? c;
const y = a || (b ?? c);

console.log(x);
console.log(y);

グループ化を変えれば結果も変わります。この括弧は飾りではなく、「こう書いたつもりですよ」という意図をパーサーにも未来の読み手にも伝える大事な印です。

デフォルト引数とは別物

関数のデフォルト引数には独自のルールがあって、引数が undefined のときだけ発動し、null では働きません。null と undefined を同じように扱う ?? とは、ここが微妙に違うポイントです。

function greet(name = 'friend') {
  return `Hello, ${name}`;
}

console.log(greet());          // デフォルトを使用
console.log(greet(undefined)); // デフォルトを使用
console.log(greet(null));      // デフォルトは使用されない

null でもフォールバックを効かせたい場合は、関数本体で ?? を使います。

function greet(name) {
  const who = name ?? 'friend';
  return `Hello, ${who}`;
}

console.log(greet(null));
console.log(greet(undefined));
console.log(greet('Rosa'));

APIが「値が未設定」を表すのにnullを返してくる場面では、ここの違いでつまずきがちです。

??を使うべき場面

基本的には??をデフォルトの演算子として使い、特別な理由があるときだけ別の方法を選ぶ、というスタンスがおすすめです。実際のデータの振る舞いに一番しっくりくるのが??だからです。0や''、falseは多くの場合「ちゃんとした値」なので残すべきで、本当にデータが欠けているときだけフォールバックを効かせたい——そんな場面にぴったりです。||の出番は、falsyな値ならなんでも置き換えたい、という明確な意図があるときだけに絞りましょう。

次回: クラス

オブジェクトと配列はこれでひと区切りです。データの形を安全に組み立てたり辿ったりする道具は揃いました。次の章からは振る舞いの整理に話が移ります。クラス、継承、そしてその裏側で動いているプロトタイプの仕組みを見ていきましょう。