TypeScriptの、はてなふたつの演算子や、はてなドットの演算子は、JavaScriptの新しい構文だった

TypeScript 3.7以降で使える ?? 演算子|| 演算子より厳密に undefinednull を判定してくれるので多用していたが、こいつの名前は何だろうと思って調べてみたところ、Nullish Coalescing Operator、日本語だとNull結合演算子というらしい。

ついでに、 ?.undefined または null な参照の場合に、エラーではなく undefined にしてくれる、RubyでいうところのNull条件演算子は、 Optional Chaining Operatorというらしい。

どちらもECMAScript2020で追加された構文で、主要ブラウザの最新版や、Node.js v14からはJavaScriptでも使えるようになっているのでメモ。

Nullish Coalescing Operator(Null結合演算子)

developer.mozilla.org

左辺が null または undefined の場合は右辺、それ以外の場合は左辺を戻り値として返す。

|| (OR演算子)との違いは、OR演算子は左辺が false として判定される場合は右辺が返るのに対し、 ?? では null または undefined に限定されること。

Falsy - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

// null, undefinedの場合は、Null結合演算子とOR演算子の違いなし
console.log(null || 'NULL'); // NULL
console.log(null ?? 'NULL'); // NULL

console.log(undefined || 'UNDEFINED'); // UNDEFINED
console.log(undefined ?? 'UNDEFINED'); // UNDEFINED

// 左辺がfalsyな場合、結果が異なる
console.log(false || true); // true
console.log(false ?? true); // false

console.log(0 || 1); // 1
console.log(0 ?? 1); // 0

console.log('' || '空文字'); // 空文字
console.log('' ?? '空文字'); // (何も表示されない)

Optional Chaining Operator(オプショナルチェイニング演算子)

developer.mozilla.org

オブジェクトのプロパティ参照時、 . (ドット表記法、MDNの文中ではチェーン演算子と呼称)を利用すると、オブジェクトが nullundefined の場合は Uncaught TypeError: Cannot read property が発生するが、 ?. を使うと undefined が返る。

プロパティチェーンで利用すると、途中のプロパティのいずれかで undefined が返れば短絡評価されるので、それ以降は実行されない。

ドット表記法だけでなく、ブラケット表記法や配列のインデックスアクセス、関数呼び出しにも使用可能。

const obj = arr = func = undefined;

console.log(obj?.prop); // ドット表記法
console.log(obj?.['expr']); // ブラケット表記法
console.log(arr?.[0]); // 配列のインデックスアクセス
console.log(func?.('args')); // 関数呼び出し

和名について

2020/8/23時点で、Optional Chaining Operatorの日本語ページでは和訳が「オプショナルチェイニング演算子」と記載されている。

翻訳が進めば「Null条件演算子」になるかな? それとも「オプション連鎖演算子」とかだろうか?

と思っていたら、三項演算子のページからは、「オプション連鎖」でリンクが張られていた。

developer.mozilla.org

振り返り

TypeScriptの Planning ラベルがついたissueに、バージョンごとのTypeScriptでリリースされた機能などがまとまっている。

github.com

演算子の中でも、はてな記号、クエスチョンマークがつくと検索に引っ掛かりづらいので困る。

参考

ECMAScript2020で追加された仕様については、以下にまとまっている。

ics.media