論理和代入演算子 (x ||= y) は、x が falsy である場合にのみ代入します。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
構文
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 の定義 |
ブラウザの互換性
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| デスクトップ | モバイル | サーバー | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Logical OR assignment (x ||= y) | Chrome 完全対応 85 | Edge 完全対応 85 | Firefox 完全対応 79 | IE 未対応 なし | Opera 未対応 なし | Safari 完全対応 14 | WebView Android 完全対応 85 | Chrome Android 完全対応 85 | Firefox Android 完全対応 79 | Opera Android 未対応 なし | Safari iOS 完全対応 14 | Samsung Internet Android 未対応 なし | nodejs 未対応 なし |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応