オプショナルチェイニング演算子とは

ES2020（JavaScript）からの新機能です。

Optional Chainingとは、?.構文を用いてnullやundefinedになりうる値へ安全にアクセスできる仕組みです。

A?.B
// AがnullかundefinedでないときBを返す

このとき、存在しないルートオブジェクトでは使用できません。

if (a == "undefined")のようなチェックを置き換えるものではありません。詳しくは後述します。

検索用

オプショナルチェイニング演算子。

?.だけを用いるため検索にヒットしにくいですよね。私自身も結局自力では見つけられず他人に教えていただきました。そのとき調べた単語を覚えている限り羅列しておきます笑。

はてな、クエスチョン、疑問符、はてなマーク、クエスチョンマーク、question、約物、どっと、ドット、dot、てん、点、式、はてなと点

もし探している方の目にとまれば幸いです。

サンプル

const adventurer = {
  name: 'アリス',
  cat: {
    name: 'ねこ'
  }
};

console.log(adventurer?.name);
// 結果：アリス

const catName = adventurer.cat?.name;
console.log(catName);
// 結果：ねこ

const dogName = adventurer.dog?.name;
console.log(dogName);
// 結果：undefined

置き換えではない

先述した「if (a == "undefined")のようなチェックを置き換えるものではない」ことについて解説します。

A?.B
// AがnullかundefinedでないときBを返す

これを素直に受け止めると、単純にBに結果を渡そうとしてしまうかもしれません。以下に例を挙げました。

const adventurer = {
  name: 'アリス',
  cat: {
    name: 'ねこ'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// 結果：undefined

const dogName = adventurer.dog?."aaa";
console.log(dogName);
// 結果：Error: Unexpected string

上記の違いがわかるでしょうか。

つまり、A?.Bがあったとき、AがnullかundefinedでないときBに繋げることが出来るだけです。チェイニングというネーミングがそういう意味合いがあるのかもしれませんね。

AがnullかundefinedでないときBを返す

A?.B

AがnullかundefinedでないときA.Bを返すということです。

nullでも結果はundefined

const A = null;
console.log(A?.B);

この場合、結果はどうなるでしょうか。

AがnullだったとしてもA?.Bはnullではなくundefinedになります。

const A = null;
console.log(A?.B);
// 結果：undefined

勘違いしやすいので注意しましょう。

短絡評価（ショートサーキット評価）

演算子の記事でも少し触れました。

bonoponz.hatenablog.com

JavaScriptでは式は左から右へ評価されるため式の結果が確定した時点でその後の評価を行わないことを、短絡評価（ショートサーキット評価）といいます。

const obj = { param: 'Hello' };
const obj2 = null;
const param = 'Hello' ;

// lengthを使って文字列の長さを取得
const A = obj.param?.length;
const B = obj2?.param.length;
const C = param.length;

console.log(A);　// 結果：5
console.log(B);　// 結果：undefined
console.log(C);　// 結果：5

変数Bを見てみると、obj2がnullなので、以降の.param.lengthについては評価していません。

このようにオプショナルチェイニング演算子においては、左側の値がnullまたはundefinedである場合その式は評価されずundefinedが返ってきます。

参考URL

Optional chaining (?.) - JavaScript | MDN

そろそろJavaScriptに採用されそうなOptional Chainingを今さら徹底解説 - Qiita

小さなことからこつこつと。

【JavaScript】オプショナルチェイニング演算子