【JavaScript】オプショナルチェーン演算子(?.)の使い方

• オブジェクトの特定のプロパティが存在しない場合、エラーがスローされず、単に undefined を返す。

• ネストされたオブジェクトのプロパティにアクセスする際、各階層が存在するかどうかを一度にチェック可能。例：user?.address?.street

• 関数やメソッドが存在しない場合でもエラーをスローせずに undefined を返す。例：user?.greet()
• プロパティや関数が存在するか不明な場合に、if文などの判定が不要になる。

それでは以下でオプショナルチェーン演算子を使った例を見ていきましょう

オブジェクトのプロパティを指定する例

const obj = { a: { b: 1 } };

//存在するオブジェクトを指定
console.log(obj.a?.b);  // 1
console.log(obj.a.b);  　// 1

//存在しないオブジェクト。オプショナルチェーン演算子を使用するとundefinedを返す
console.log(obj.c?.b);  // undefined

//存在しないオブジェクト。エラーを返す
console.log(obj.c.b);  //TypeError: Cannot read properties of undefined (reading 'b')

関数を指定する例

const obj = {
  func: () => console.log("Hello, world!")
};

//存在する関数
obj.func();  // Hello, world!
obj.func?.();  // Hello, world!


//存在しない関数。オプショナルチェーン演算子を使用。undefinedを返す
obj.anotherFunc?.();  // undefined

//存在しない関数。エラーが発生
obj.anotherFunc();  //Uncaught TypeError: obj.anotherFunc is not a function