JavaScriptのNull合体演算子(??)は論理演算子の1つです。
Null合体演算子(??)は左辺がnullかundefined(未定義)に右辺の値を返します。
Null合体演算子
Null合体演算子(??)を利用することで、代入する値がnullかundefined(未定義)の場合は違う値を代入することができます。
これを使用することで、デフォルト値を設定するなどの使い方ができます。
let val = undefined;
const str1 = val ?? 'default';
console.log(str1); // "default"
val = null;
const str2 = val ?? 'default';
console.log(str2); // "default"
val = 'test';
const str3 = val ?? 'default';
console.log(str3); // "test"
論理OR演算子との違い
似たような演算子に「論理OR演算子(||)」があります。
論理OR演算子(||)もnullやundefined(未定義)の場合に別の値を代入することができます。
let val = undefined; // null or undefined
const num1 = val || 100;
console.log(num1); // 100
const num2 = val ?? 100;
console.log(num2); // 100
しかしOR演算子は0や”(空文字列)もfalseと判定して、デフォルト値を代入します。
数字において0は有効な値なので代入されたら困るケースなどもあります。
let val = 0;
const num3 = val || 100;
console.log(num3); // 100
const num4 = val ?? 100;
console.log(num4); // 0
val = '';
const num5 = val || 100;
console.log(num5); // 100
const num6 = val ?? 100;
console.log(num6); // ''
Null合体演算子は左辺の値がnullもしくはundefinedのどちらかの場合だけ、右辺を代入します。
数字にデフォルト値を設定するときは、Null合体演算子のほうが便利ですね。
まとめ
Null合体演算子はECMAScript 2020(ES2020)でリリースされた比較的新しい演算子です。
最新のブラウザでは動作しますが、古いブラウザ(IE)や古いバージョンのnodeやbabelではエラーになる可能性があります。
node ./nullEnzan.js
nullEnzan.js:2
const str1 = val ?? 'default';
^
SyntaxError: Unexpected token ?
at Module._compile (internal/modules/cjs/loader.js:723:23)
バージョンを上げてください。