Optional chaining, Nullish coalescing operator

/*
ES6 JS study from codingapple
내용: optional chaining
 */

// optional chaining : ?. 왼쪽에 있는게 null 혹은 undefined 인 경우 undefined 출력
// . : 2개 이상일 때 중첩된 obj 다뤄야할 때 사용
var user = {
    name : 'kim',
    age : 20
}

console.log(user.name);
console.log(user?.name);  // "중첩된 object 자료에서 에러없이 안전하게 데이터를 꺼낼 때" 
console.log(user.age1?.value1) //에러는 안남 매우안전 (에러해결이 아닌 에러를 감추는 문법)




// ?? nullish coalescing operator: 왼쪽이 null undefined면 오른쪽 보여줘요
// 판단대상 ?? 대신보여줄것

var user;
console.log(user ?? '로딩중')

 

 

 

실전예제(연산자 중심으로 생각해보기)

const kakaoKey = data.value?.kakaoKey ?? data.kakaoKey;

const bundle = oComponent.getModel("i18n")?.getResourceBundle();
MessageBox.warning(
    bundle?.getText("sessionExpiredMsg") ?? "로그인 세션이 만료되었습니다.\n다시 로그인해주세요.",
    {
        title: bundle?.getText("sessionExpiredTitle") ?? "세션 만료",
        onClose: () => {
            oComponent.getRouter().navTo("Login", {}, true);
        }
    }
);

this.byId("accountNick")?.setText(info.nick || "");

c.byId("accountActionButtons")?.setVisible(!show && !this._isPasswordMode);

 

const mapped = reviews.map(r => ({

categoryName: r.restaurant?.category_name?.replace(/^음식점\s*>\s*/, "") || "",
thumbUrl: data.images?.find(i => i.sort_order === 0)?.imgurl || null

}));