JS、TSの「?.」って何者か

はじめに

TypeScriptのコードを書いていると予測変換で選択してEnterを打鍵したとき、IDEが勝手に以下の感じになったりする

foo?.bar

今までほとんど使う場面がなかったために何なのか把握してなかったが、使っていた場面に出くわしたので、超初歩的な内容かもしれないが、備忘のために記事を投稿しようと思った
ちなみに?.はJSでもある

そもそも名称は何なのか

オプショナルチェイニング演算子という名称らしい
当然初耳だし、今まで雑に「はてなドット」って呼んでました

挙動

オブジェクトのネストの深いプロパティにアクセスするときにnullishを確認せずにアクセスできるようになる
以下は使用例

type A = {
	a?: {
		b: string;
	};
};

const a: A = { 
	a: {
		b: "hoge"
	};
};

// nullishを確認する場合
console.log(a.a ? a.a.b : undefined);
// => hoge

// オプショナルチェイニング演算子を使った場合
console.log(a.a?.b);
// => hoge

参考演算子での確認を省ける分簡潔になる
また、参照がnullishの場合には式が短絡評価されundefinedが返り、それ以降は実行されない

余談だがnullishのときに返したい値をundefined以外にしたい場合は三項演算子を使わず以下のように書ける

const b: A = {
	a: undefined
};

console.log(b.a?.b);
// => undefined

console.log(b.a?.b || "hogehoge");
// => hogehoge

関数や配列に対しても使える

type B = {
	a?: string[];
	b?: (n: number) => number;
};

const c: B = {
	a: ["foo", "bar"],
	b: (n: number) => n + 1
};

// 配列
console.log(c.a?.[0]);
// => foo

// 関数
console.log(c.b?.(1));
// => 2

ドットのあとに括弧があるのに違和感を覚えるが、どうやらどんな型であれ?.の形は揺らがないっぽい

おわりに

まあほとんど参考のリンクを読めばいいのだが、冒頭で述べた通り記事に残すことで頭に残りやすいということで投稿してみた
仕様を把握した限り、何故今まで使ってこなかったのかわからんくらいには便利な気がしている
今まですべて三項演算子等でnullishのチェックをしていたので、使える場面をしっかり見極めて、効果的に三項演算子と使い分けられるように戒めたい

参考

Optional chaining - JavaScript | MDN