変数、または関数のあとに `?.(クエスチョンとピリオド)` を記載するオプショナルチェーンについて

変数、または関数のあとに ?. を記載するオプショナルチェーンについて

ライブラリのコードを読んでいたら変数の前に ?. (クエスチョンとピリオド) という記法、自分の中であまり馴染みがなかったので調べてみたら、これはオプショナルチェーンと呼ばれているらしい。

developer.mozilla.org

どうやらES2020で追加されていたらしい。英語表記は Optional Chains 。

https://tc39.es/ecma262/#prod-OptionalChain

オプショナルチェーン(Optional Chains)の挙動について

下記のような記述があったとして、aという変数が null 、 または undefined であれば、undefined を返す。

a?.b

オプショナルチェーンのサンプル

上に貼ったMDNのドキュメント内のコードを元にして、実行結果について整理する。

オプショナルチェーンの前の変数、または関数が未定義の場合、undefinedとなる。

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined

また、 dog: null の場合も同様の結果となる。

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  },
  dog: null,
};

const dogName = adventurer.dog?.name;
console.log(dogName);

上記それぞれのサンプルではエラーなく実行が可能だが、オプショナルチェーンがない場合は当然エラーになる。

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog.name; // Error: Cannot read properties of undefined (reading 'name')

オプショナルチェーンの前の変数、または関数が定義されている場合、正常に参照・実行結果が表示される

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  },
  someNonExistentMethod: function () {
    return 'foo'
  },
};

const catName = adventurer.cat?.name;
console.log(catName);
// expected output: Dinah

console.log(adventurer.someNonExistentMethod?.());
// expected output: foo