?. Optional Chaining

Optional Chaining 💡

옵셔널 체이닝은 비교적 최근에 나온 문법이라 옛날 브라우저에서는 폴리필이 필요함.

옵셔널 체이닝을 사용하면 연결된 객체의 체인 내의 속성 값을 읽을 수 있는 연산자이다.

즉, 속성 값이 존재한다고 확실히 보증하지 못하는 경우 사용하면 유용하다.

Ex)

const users = {
  user1: {
    name: 'ajrfyd',
    age: 13
  } ,
  user2: {
    name: 'Mr.Kim',
    age: 15
  }
}
console.log(users.user3.name) // TypeError: Cannot read properties of undefined (reading 'name')
console.log(users.user3?.name) // undefined

위와 같이 옵셔널 체이닝 문법으로 ?.를 붙이게 된다면 오류를 뱉지 않고 undefined를 반환한다.

function getData(url) {
  const { data } = // 데이터를 받아온다
  return data.person?.name;
}

옵셔널 체이닝을 사용하지 않는다면??

function getData(url) {
  const { data } = // 데이터를 받아온다
  if(data && data.person) {
    return data.person.name;
  }
  return null;
}

값이 있는지 없는지 확인해야 하며, 만약 값이 없다면 타입 에러를 발생 시키기 때문.

⭐️ 주의 사항 ⭐️

• ?. 앞의 변수는 꼭 선언 되어 있어야 한다.(위에서 데이터를 받아온 뒤 사용함)
• ?. 데이터를 읽거나 삭제하는데 사용 가능하지만 쓰기에는 사용 불가. user?.name= 'kim' ❌