JSでオブジェクトがnullやundefinedでもエラーにしない書き方（?・クエッション・疑問符）

こんにちは！

今回は「JSでオブジェクトがnullやundefinedでもエラーにしない書き方」について、お伝えしていきたいと思います。

例えば、以下のJSコードはエラーになります。

// null値に対して、プロパティを指定した場合
const obj = null;
console.log(obj.name) // Uncaught TypeError: Cannot read property 'name' of null

// undefined値に対して、プロパティを指定した場合
const obj = undefined;
console.log(obj.name) // Cannot read property 'name' of undefined

このような「プロパティが存在しない」エラーを回避する書き方について、以下で紹介していきます。

未定義エラーを回避するには「オプショナルチェイニング演算子(.?)」を使う

JSにはオプショナルチェイニング演算子.?と呼ばれる演算子が存在します。

オプショナルチェイニング演算子.?を使うことで、オブジェクトの値を取得しようとしたが、オブジェクトがundefinedまたはnullだった場合、undefinedを返します。

const obj = null;
console.log(obj?.name) // undefined

書き方としては、
オブジェクトでプロパティを指定して、
ピリオド.の後ろにクエッション?をつけるだけです。

例：obj?.name, ojb.items?.name

角括弧を使った書き方はできません 例： obj['name']

オプショナルチェイニング演算子(.?)を使った書き方

指定したオブジェクトの中身がundefinedの場合

const obj = undefined;
console.log(obj?.name) // undefined

エラーにならず、undefinedが設定されます。

もう少し複雑なオブジェクトを例に試してみます。

まずはオプショナルチェイニング演算子(.?)を使わないパターンです。

const obj = {
  id: 3,
  name: {
    firstName: 'ohnny',
    lastName: 'Depp',
  }
};

console.log(obj.name.middleName); // undefined
console.log(obj.age); // undefined
console.log(obj.address.city); // Error: Cannot read property 'city' of undefined

オブジェクトの二つ下の階層が存在しない場合は、Cannot read property 'city' of undefinedとエラーが返されました。

次にオプショナルチェイニング演算子(.?)を使ったパターンです。

const obj = {
  id: 3,
  name: {
    firstName: 'ohnny',
    lastName: 'Depp',
  }
};

console.log(obj.name?.middleName); // undefined
console.log(obj?.age); // undefined
console.log(obj.address?.city); // undefined

指定したオブジェクトの中身がnullの場合

const obj = null;
console.log(obj?.name) // undefined

undefinedの場合と同様、エラーにはなりません。

まとめ

オブジェクト名?.プロパティ名と指定すると、
オブジェクトがnullまたはundefinedだった場合に、
エラーにならず、undefinedを返す