オプショナルチェーンについて

オプショナルチェーンについて

存在が未確定のプロパティのnullやundefinedのチェック

オブジェクトのプロパティが存在するかどうかわからない場合、存在しなかった場合には、そのプロパティを参照しないようにするために、nullまたはundefinedのチェックが必要となります。

チェックをしなかった場合は、そのプロパティが存在しなかった場合に、エラーになります。

エラーを起こさないようにする場合、変数やプロパティがnullまたはundefinedかどうかのチェックをして、存在しなかったときは、undefinedを返す必要があります。普通に書くと下記のような記述になります。ネストが深くなると、もっと記述量が増えて、複雑になります。

const response = { token: "fafae92rfjafa03", ok: true, code: 200 }
const token = response === null || response === undefined ? undefined : response.token;

オプショナルチェーンの使い方

オプショナルチェーン(?.)演算子を使うと、上記と同じことを、より簡単に記述することができます。ネストされたプロパティにも使用できます。

const response = { token: "fafae92rfjafa03", ok: true, code: 200 }
const token = response?.token;

もしも、?.の前に書かれている変数やプロパティの値が、nullかundefinedだったら、その先の.tokenは評価されずに、undefinedが返ります。上記のコードの場合は、response.tokenまで到達しなくなります。

おわりに

今回は、ネストされたプロパティのnullやundefinedのチェックすることができるオプショナルチェーンについて、まとめました。とても便利なので、ぜひ使ってみてください。

まい

フロントエンドエンジニア目指して、勉強中です。

JavaScriptカテゴリの最新記事