Optional Chaining

なぜ隙間が必要なのか

let user = {}; // 주소 정보가 없는 사용자

console.log (user.address.street);
// Uncaught TypeError: Cannot read property 'street' of undefined

アドレス情報がない場合、アドレス情報にアクセスするとエラーが発生します.
別の例は、ブラウザで実行されるコードを開発するときに発生する可能性のある問題です.
JavaScriptを使用してページに存在しない要素にアクセスし、要素の情報を取得しようとすると、問題が発生します.

let html = document.querySelector(".my-element").textContent;
// querySelector(...) 호출 결과가 null인 경우 에러가 발생한다.
// Uncaught TypeError: Cannot read property 'textContent' of null

optional chaining

?.は、?.「前」の評価対象が定義されていないかnullである場合、評価を停止し、未定義に戻ることを示す.

let user = {};
alert (user?.address?.street); // undefined , 에러 발생하지 않는다.

let user = null;
alert(user?.address); // undefined
alert(user?.address.street); // undefined

?.は、?.「前」評価対象のみに作用し、拡張できない.
上記の例で使用されるuser?.は、userがnullまたはundefinedである場合にのみ処理される.
実際の値がある場合は、user.addressのパーセントが必要です.
そうでなければ、user?.address.streetの2番目のポイント演算子にエラーが発生します.

console.log(user?.address.street);
//Uncaught TypeError: Cannot read property 'street' of undefined

let user = {
    address: "uiJeongBu"
}
// address를 넣어주고 다시 콘솔에 찍어보면,

console.log(user?.address.street);
// undefined

🚨 外来スポーツは乱用してはいけない。

?.が存在しなくても良いオブジェクトにしか使用できません.
上述したユーザアドレスの例では、論理的にはuserが必要であるが、addressは必須値ではない.したがって、user.address?.streetを使用することが望ましい.
ミスでuserに値を付けなかったら、すぐに調べなければなりません.
そうでなければ、早く間違いを発見することはありません.

🚨 ?. 前の変数には宣言が必要です。

変数userが宣言されていない場合、user?.anythingの評価でエラーが発生します.

たんらくひょうか

?.左評価対象に値がない場合は直ちに評価を停止する.この評価方法を段落評価と呼ぶ.関数呼び出しを含む?.右側の付加動作は、?.の評価停止時には発生しない.
(うん…よくわからないけど)
ソース:https://ko.javascript.info/optional-chaining