2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

TypeScriptの??と?について

Posted at

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 は「オプショナルチェーン (演算子)」となっている。

参考サイト

2
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?