[JavaScript] 선택적 체이닝 (Optional Chaining)

선택적 체이닝 (Optional Chaining)

// 선택적 체이닝 (Optional Chaining)

const user = null;
console.log(user?.name); // undefined

const user = undefined;
console.log(user?.name); // undefined

→ user 뒤에 ?(물음표) 안붙이면 error 뜸. 못읽어들임.

---

const userA = {
  name: "Sangah",
  age: 31,
  address: {
    country: "Korea",
    city: "Seoul",
  },
};

const userB = {
  name: "Kangjun",
  age: 22,
};

function getCity(user) {
  return user.address?.city;
'체이닝 형태'로 타고 타고 들어가서 데이터를 가지고 나옴.
}

console.log(getCity(userA)); // Seoul
console.log(getCity(userB)); // address 뒤에 ? 안붙이면, error남. city 읽을 수 없음.
// 하지만 address 뒤에 ?(물음표)를 위에 붙이면 undefined 출력!

---

const userA = {
  name: "Sangah",
  age: 31,
  address: {
    country: "Korea",
    city: "Seoul",
  },
};

const userB = {
  name: "Kangjun",
  age: 22,
};

function getCity(user) {
  return user.address?.city || "주소 없음";
}

|| (또는) 연산자 사용하니까 왼쪽에서부터 첫번째 피연산자를 확인해서 오른쪽으로 넘어가는데
그중에서 제일 처음 만나는 참 (Truty) 데이터를 반환함.

console.log(getCity(userA)); // Seoul
console.log(getCity(userB)); // 주소 없음 (빈 문자가 없으니까 참 데이터로 "주소 없음" 출력됨)

⚠️ 선택적 체이닝 주의점
: 점표기법을 사용해야 하지만 user 데이터들처럼 name, age는 기본 속성이되,
address는 있을 수도 있고, 없을 수도 있는 이러한 '특수상황'에서만 명확하게 사용.
일반적인 상황에서는 선택적 체이닝을 남용해서는 안되는 것이다. 꼭 필요한 상황에서만 사용하면 된다.