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

선택적 체이닝은 있을수도 있고, 없을 수도 있는 데이터를 다룰 때 유용하다.

 

아래와 같은 user 2명이 있다고 해보자.

const userA = {
  name: "bumang",
  age: 20,
  address: {
    country: "korea",
    city: "gimpo",
  },
};

const userB = {
  name: "neo",
  age: 20,
};

userA는 address라는 속성과 값을 가지고 있지만, userB는 가지고 있지 않다.

 

 

이 상황에서 getAddress라는 함수를 만들어서 사용하고자 할 때,

function getAddress(user) {
  return user.address.city;
}


console.log("!", getAddress(userB));
//reference error 발생!

userB의 Address를 반환받고 싶은데 반환 받을 수가 없다...

 

 

데이터가 이렇게 주어질 경우에도.. 레퍼런스 에러를 내지 않으려면

function getCity(user) {
  return user.address?.city || "주소가 없습니다."; // or 선택자로 좌변이 undefined일 시 안내 문구가 나오게 할 수 있다.
}

console.log(getCity(userA)); // Gimpo
console.log(getCity(userB)); // undefined

선택적 체이닝을 이용할 수 있다. 존재하지 않을 가능성이 있는 문제적인 속성 점 선택자에 ? 마크를 붙임으로써

이 값이 없을 경우에 undefined를 반환하도록 만들 수 있다.

(ex .address?.city)