表示されているページは、編集用 バージョンの MDN Web Docsです

MDN Web Docs のユーザーとして表示: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment

論理和代入演算子 (x ||= y) は、xfalsy である場合にのみ代入します。

構文

expr1 ||= expr2

説明

短絡評価(ショートサーキット)

論理和演算子は次のように動作します。

x || y;
// x が truthy の場合 x を返します
// x が truthy ではない場合 y を返します

論理和演算子は、1番目のオペランドが既に結果を決定していない場合にのみ、2番目のオペランドの評価を行う短絡評価をします。

論理和代入も短絡評価されます。これは、x ||= y が以下と等価であることを意味します。

x || (x = y);

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

x = x || y;

注意: この動作は、数学的な代入演算子やビット代入演算子とは異なることに注意してください。

デフォルトの内容を設定する

"lyrics" 要素が空の場合は、innerHTML をデフォルト値に設定します。

document.getElementById('lyrics').innerHTML ||= '<i>No lyrics.</i>'

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

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

仕様

仕様書
Logical Assignment Operators
Assignment operators の定義

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung InternetNode.js
Logical OR assignment (x ||= y)Chrome 完全対応 85Edge 完全対応 85Firefox 完全対応 79IE 未対応 なしOpera 未対応 なしSafari 完全対応 14WebView Android 完全対応 85Chrome Android 完全対応 85Firefox Android 完全対応 79Opera Android 未対応 なしSafari iOS 完全対応 14Samsung Internet Android 未対応 なしnodejs 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mpcjazz
最終更新者: mpcjazz,