Optional Chaining(?.)
use1の値がnullかundefinedではない場合はnameを返します。
外部APIから情報を持ってくるときは、nameというプロパティが漏れている可能性も考えられます。
そこでuser1にnameは入っていますよと事前に明示し、入っていた場合そのnameプロパティを表示するようにする必要があります。
Optional Chaining(?.)を使用しない場合は、
以下のようにuser1が存在し、かつuser1の中にnameというプロパティも存在すると定義します。
const user1 = {name:"suzuki"}
const user1name = user1 && user1.name
console.log(user1name) //suzuki
逆にOptional Chaining(?.)を使用する場合は、
const user1 = {name:"suzuki"}
const user1nameOptional = user1?.name
console.log(user1nameOptional) //suzuki
//nameがある場合は「suzuki」が出力される
//nameがない場合はエラーにならず、undefinedが出力される
なお、Optional Chaining(?.)は何個でも使用可能です。
Nullish coalescing Operator
nullishはuser1.nameがnullかundefinedの場合、右辺を返します。user1.nameに値が入っていた場合は左辺を返します。
そのままnullかundefinedで返したくない場合に使えます。
const user1 = {name:"suzuki"}
const user1name = user1?.name ?? 'someone'
console.log(user1name) //suzuki
const user1age = user1.age ?? 'private'
console.log(user1age)
//user1はageプロパティは持っていないので右辺の'private'出力される
またfalsyな値(0,'',null,undefined,falseなど)についてもnullishではスルーされずに出力されます。
const user1 = {name:"suzuki",age:0}
const user1age = user1?.name
const user1ageNullish = user1?.age ?? 'private'
const user1ageLogical = user1?.age || 'private'
console.log(user1ageNullish) //null,undefinedではないので０が出力される
console.log(user1ageLogical) // ageプロパティは持っていないのでprivateが出力される
||では 0 や空文字もスル-されてしまうのに対し、
nullishではスルーされず返されます。
以下はサンプルです。
console.logで出力される値は最後に書いていますのでどのような出力になるか考えてみてください。
const user1 = {name:"suzuki"}
const user2 = {name:""}
const user3 = {name:false}
const user4 = {name:0}
const user5 ={}
const name1 = user1?.name
const name2 = user2?.name || 'someone'
const name2nullish = user2?.name ?? 'someone'
const name3 = user3?.name || 'someome'
const name3nullish = user3?.name ?? 'someone'
const name4 = user4?.name || 'someone'
const name4nullish = user4?.name ?? 'someone'
const name4optional = user4?.name
const name5 = user5?.name || 'someone'
const name5nullish = user5.name ?? 'someone'
const name5optional = user5?.name
console.log(name1) // suzuki
console.log(name2) //someone
console.log(name2nullish) //空文字
console.log(name3) //someone
console.log(name3nullish) //false
console.log(name4) //someone
console.log(name4nullish) //0
console.log(name4optional) //0
console.log(name5) //someone
console.log(name5nullish) //someone
console.log(name5optional) //undefined