【JavaScript】 Optional chaining – on Object

Optional chaining とは

オブジェクトに特定のプロパティが存在するかどうかあやしいときには、Optional chainingというものが使えます。

たとえば、

const user = {
    details: {
        name: {
            firstName: "Sam"
        }
    },
    data: null
}

というオブジェクトがあったとします。

しかし、あなたはuserというオブジェクトの中にdetailsやnameというプロパティがあるかよく覚えていないという場合（firstNameというプロパティがあるのは知ってる）、次のようにOptional chainingを使うことができます。

user.details?.name?.firstName; // "Sam"

この場合、プロパティが存在するので、”Sam”という値が返ってきます。

もし途中に存在しないプロパティがあった場合は、すぐにundefinedが返ってきます。

user.data?.id; // undefined　
user.children?.names; // undefined 
user.details?.parent?.firstName; // undefined 

なお、Optional chainingはObject上でしか働かないので、上の例だとuserというオブジェクトが存在することを明確に認識している場合のみOptional chainingが使えます。
そのため、user.までは?がついていません。
その下のプロパティはあやふやで、あるかどうかわからんという状態なので、?がつきます。

別の言い方でOptional chainingを説明すると、

if (user.details && user.details.name && user.details.name.firstName) {
    return user.details.name.firstName;
}

というif文で書いたコードは、

　return user.details?.name?.firstName;

というOptional chainingを使ったコードにリファクタリングできます。
もし途中に存在しないプロパティがあれば、即時undefindが返ってきます。

Optional chainingをobject内のarrayで使う方法

const data = {
    temperatures: [-3, 14, 4]
}

というobjectがあったとします。
そして、temperaturesというpropertyがあるかどうかあやふやな場合にif文を使って下記のコードを書いたとします。

let firstValue;
if (data.temperatures) {
    firstValue = data.temperatures[0];
}

このコードは次のとおりリファクタリングできます。

firstValue = data.temperatures?.[0];

dataというオブジェクトがtemperaturesというarrayプロパティがもしあれば、その1番最初の要素をfirstValueに格納します、という意味

関数でもOptional chaining

次のようなpersonというオブジェクトがあったとします

const person = {
    age: 43,
    name: "Sam"
};

ここでnameというプロパティがあるかどうかあやふやな場合、

let upperCasedName = person.name; // nameがあるかどうかあやふや
if (person.name) {
    upperCasedName = person.name.toUpperCase();
}

このコードはoptional chainingを使うと次のとおりリファクタリングできます。

const upperCasedName = person.name?.toUpperCase(); // "SAM"

もしnameがあれば”SAM”と返ってきますし、なければundefindが返ってくるので、”Cannot read property ‘toUpperCase’ of undefined”というエラーは発生しません。