Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Logical assignments

論理積代入演算子 (&&=) は、左オペランドが真値の場合にのみ右オペランドを評価し、左オペランドに代入します。

言語コアES2021

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
logical and assignment
85
85
79
14
85
14
logical or assignment

論理和代入演算子 (||=) は、左オペランドがfalsyの場合にのみ右オペランドを評価し、左オペランドに代入します。
85
85
79
14
85
14
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT 
let a = null;
a ??= 'default'; // a is 'default'

let b = '';
b ||= 'fallback'; // b is 'fallback'

let c = 'hello';
c &&= c.toUpperCase(); // c is 'HELLO'

ライブデモ

OR代入 (||=)

変数が偽値（空文字、0など）のときだけ代入します。

プレビュー全画面表示

AND代入 (&&=)

変数が真値のときだけ代入します。

プレビュー全画面表示

Null合体代入 (??=)

変数が null または undefined のときだけ代入します。

プレビュー全画面表示

実務での使いどころ

  • Logical assignments の活用

    論理積代入演算子 (&&=) は、左オペランドが真値の場合にのみ右オペランドを評価し、左オペランドに代入します。

注意点

  • 特になし。すべての主要ブラウザで安定して動作する。

アクセシビリティ

  • JavaScript による動的更新時は、aria-live リージョンで変更をスクリーンリーダーに通知する。

参考リンク