13 回閲覧されました

みなさんこんにちは、jonioです。

今回はJavaScriptのオプショナルチェーンについてのメモの記事になります。

オプショナルチェーンとは

存在しないかもしれないプロパティや関数を安全に参照する為の方法です。

「安全に参照する」とは「エラーを出さない」という意味になります。

記号は「?.」を使います。

具体的に簡単なコードを見ていきます。

簡単なサンプルコード

まずは下記のオブジェクトで考えます。

const user = {
  name: "田中",
  address: {
    city: "東京"
  }
};

下記のコードを記述します。

console.log(user.address?.city); 

これは「東京」が表示されます。

下記の場合はどうなると思いますか？

console.log(user.address?.local); 

localはないのでundefinedになります。

これが下記の場合はエラーになります。

console.log(user.address.local);

こういうエラーが起きないようにする為にオプショナルチェーンは存在します。

関数にも使える

下記の使い方もできます。

const user = {
  sayHello: () => "こんにちは！"
};

console.log(user.sayHello?.());   // こんにちは
console.log(user.sayBye?.());     // undefined