論理和代入演算子 (||=)

試してみましょう

const a = { duration: 50, title: "" };

a.duration ||= 10;
console.log(a.duration);
// 予想される結果: 50

a.title ||= "title is empty.";
console.log(a.title);
// 予想される結果: "title is empty."

構文

x ||= y

解説

論理和代入演算子は短絡評価を行うため、x ||= y は x || (x = y) と同等です。ただし、式 x は一度だけ評価されます。

左辺が偽値でない場合、論理和演算子の短絡が発生するため代入は実行されません。例えば、 x が const であっても、以下のコードはエラーが発生しません。

const x = 0;
x ||= 2;

次のコードもセッターを起動しません。

const x = {
  get value() {
    return 1;
  },
  set value(v) {
    console.log("セッターが呼び出されました");
  },
};

x.value ||= 2;

そして、常に代入が行われる以下と等価ではありません。

const x = 1;
x ||= console.log("y が評価されました");
// 何もログ出力されない

例

既定の内容を設定する

"lyrics" 要素が空の場合は、既定値を表示します。

document.getElementById("lyrics").textContent ||= "No lyrics.";

ここでの短絡評価は、要素が不必要に更新されることがなく、追加のパースやレンダリング作業、フォーカスの損失などの望ましくない副作用を引き起こすことがないので、特に有益です。

注意: チェック対象の API が返す値に注意してください。空の文字列（偽値）が返される場合は、||= を使用する必要があります。それ以外の場合 (返値が null または undefined の場合) は ??= 演算子を使用してください。

仕様書

ブラウザーの互換性

関連情報

• 論理和演算子 (||)
• Null 合体演算子 (??)
• ビット論理和代入演算子 (|=)
• 真値
• 偽値