ES2020 Optional Chaining

バジル
2020-06-30
バジル
2020-06-30

今日はES2020の新機能を紹介

お久しぶりです。バジルだわんです。
今回はES2020で、弊社的に嬉しい変更を紹介したいと思います。

変更点の詳細などは「ES2020」を御覧ください。
```
const myData = {
  name: "バジル",
  address: {
    state: "福岡",
  }
}

console.log(myData.address.state);
```
上記はちゃんと「福岡」と表示されます。
しかしながら下の場合。
```
const myData = {
  name: "バジル",
}

console.log(myData.address.state);
```
この場合、そもそもmyData.addressが存在しないため、エラーとなってしまいます。
エラーとならないようにするには、こうする必要があります。
```
const myData = {
  name: "バジル",
  address: {
    state: "福岡",
  }
}

console.log(myData.address &&myData.address.state);
```
こうすると、addressがない場合はundefined、addressがある場合は「福岡」が表示されるようになります。
でも、長くてあんまり書きたくないですよね。
これを解決してくれるのがこれ。
```
const myData = {
  name: "バジル",
  address: {
    state: "福岡",
  }
}

console.log(myData.address?.state);
```
ありがたいです。見やすいです!

私からは以上です。