こんにちは!
今年も夏が来ましたね〜
エンジニアのみなさま、この時期、夏バテにお気をつけてください...!
中には自宅でエアコンなしの部屋でコーディングされている方もいるんだとか。。。(ただでさえ暑いのに、Macとかめちゃくちゃ熱こもりますし、心配です。。)
今回は「オブジェクトが未定義だった場合のエラーを回避する方法」について、調べてみました。
ご指摘やアドバイス等をいただけると、大変助かります。
【2020年7月4日追記】
@standard-software さんコメントありがとうございます!
オプショナルチェイニングoptional chaining演算子を使います!
[公式ドキュメント] (https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining)
本記事の対象者
JavaScript初心者〜初中級者
(おさらい)
基本パターン
const obj = {name: 'KumKum'};
console.log(obj.name) // KumKum
基本的なオブジェクトの定義ですね
指定したオブジェクトの中身がnullの場合
const obj = null;
console.log(obj.name) // Uncaught TypeError: Cannot read property 'name' of null
オブジェクトがnullの場合エラーになります
指定したオブジェクトの中身がundefinedの場合
const obj = undefined;
console.log(obj.name) // Cannot read property 'name' of undefined
undefinedの場合も同様ですね
ここから本題
先ほどのエラーを回避するにはどうしたら良いのか。
以下のように?(クエッション) を使うことで、undefinedをセットすることができます。
指定したオブジェクトの中身がnullの場合
const obj = null;
console.log(obj?.name) // undefined
エラーにならず、undefinedが設定されます。
指定したオブジェクトの中身がundefinedの場合
const obj = undefined;
console.log(obj?.name) // undefined
nullと同様、エラーにはなりません。
まとめ
オブジェクト名?.プロパティ名と指定すると、
オブジェクトがnullまたはundefinedだった場合に、
エラーにならず、undefinedを返す