33
28

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【JavaScript】オブジェクトが未定義だった場合のエラーを回避する方法 ?(クエッション・疑問符)

Last updated at Posted at 2020-07-03

こんにちは!
今年も夏が来ましたね〜
エンジニアのみなさま、この時期、夏バテにお気をつけてください...!
中には自宅でエアコンなしの部屋でコーディングされている方もいるんだとか。。。(ただでさえ暑いのに、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を返す

33
28
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
33
28

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?