JavaScriptのNull合体演算子の使い方

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)

バージョンを上げてください。