Nullish coalescing
Nullish coalescing 演算子（??）は左辺が null または undefined の場合のみ右辺を返します。||演算子と異なり、0, '', false を有効な値として扱います。
概要
Nullish coalescing 演算子（??）は左辺が null または undefined の場合のみ右辺を返します。||演算子と異なり、0, '', false を有効な値として扱います。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 80 | 80 | 72 | 13.1 | 80 | 13.4 | |
| その他 | ||||||
| ヌル値合体代入演算子 (??=) は、論理ヌル代入とも呼ばれ、左オペランドがnullish（null または undefined）の場合にのみ右オペランドを評価し、左オペランドに代入します。 | 85 | 85 | 79 | 14 | 85 | 14 |
基本構文
JAVASCRIPT
const value = null ?? 'default'; // 'default'
const zero = 0 ?? 'default'; // 0
const empty = '' ?? 'default'; // ''
// Difference from ||
0 || 'default'; // 'default' (0 is falsy)
0 ?? 'default'; // 0 (0 is not null or undefined)ライブデモ
Defaults without losing zero
Compare || and ?? to see why numeric zero often needs the nullish version.
JavaScript
出力
「実行」ボタンを押してください
Configuration fallback
Apply defaults only to missing options while keeping explicit empty or false values.
JavaScript
出力
「実行」ボタンを押してください
実務での使いどころ
-
Nullish coalescing の活用
null/undefined のみをチェックする演算子 (??)。|| と異なり 0 や空文字を有効値として扱う。
注意点
- 特になし。すべての主要ブラウザで安定して動作する。
アクセシビリティ
- JavaScript による動的更新時は、aria-live リージョンで変更をスクリーンリーダーに通知する。
参考リンク
Powered by web-features