TypeScriptで見かける?と??という演算子。
意味を知らないと完全に暗号のようだが、意味を知ればちゃんと読める!(当たり前)
という事で、調べてみた。
TypeScriptの、はてなふたつの演算子や、はてなドットの演算子は、JavaScriptの新しい構文だった
JavaScript TypeScript
TypeScript 3.7以降で使える ?? 演算子。 || 演算子より厳密に undefined や null を判定してくれるので多用していたが、こいつの名前は何だろうと思って調べてみたところ、Nullish Coalescing Operator、日本語だとNull結合演算子というらしい。
ついでに、 ?. で undefined または null な参照の場合に、エラーではなく undefined にしてくれる、RubyでいうところのNull条件演算子は、 Optional Chaining Operatorというらしい。
どちらもECMAScript2020で追加された構文で、主要ブラウザの最新版や、Node.js v14からはJavaScriptでも使えるようになっている
Nullish Coalescing Operator(Null結合演算子)
左辺が null または undefined の場合は右辺、それ以外の場合は左辺を戻り値として返す。
|| (OR演算子)との違いは、OR演算子は左辺が false として判定される場合は右辺が返るのに対し、 ?? では null または undefined に限定されること。
// 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(オプショナルチェイニング演算子)
オブジェクトのプロパティ参照時、 . (ドット表記法、MDNの文中ではチェーン演算子と呼称)を利用すると、オブジェクトが null や undefined の場合は 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')); // 関数呼び出し
和名について
Nullish Coalescing Operator は「Null 合体演算子」、Optional Chaining Operator は「オプショナルチェーン (演算子)」となっている。
参考サイト