[JS] 옵셔닝 체이닝(?.)은 언제 사용하면 좋을까? (feat. 점표기법)

옵셔닝 체이닝(?.)

객체의 속성이나 메서드가 존재하는지 확인 후 접근할 때 사용

 

만약 속성이 null 또는 undefind라면, 에러를 발생시키지 않고 undefined를 반환

=> 안전하게 객체의 속성 접근

 

const user = {
  name: 'Alice',
  address: {
    city: 'New York',
  },
};

// 옵셔널 체이닝 없이:
console.log(user.address.city); // 'New York'
console.log(user.address.street); // undefined (정상 작동)
console.log(user.phone.number); // TypeError: Cannot read property 'number' of undefined

// 옵셔널 체이닝 사용:
console.log(user?.address?.city); // 'New York'
console.log(user?.address?.street); // undefined
console.log(user?.phone?.number); // undefined (에러 없이 안전하게 처리)

 

그렇다면 언제  ?. 사용하는게 좋을까?

• 객체가 존재할지 확신이 없는 경우: 객체가 null 또는  undefined일 가능성이 있을때
• 네트워크 요청이나 외부 데이터: 서버에서 받은 데이터가 구조적으로 항상 일정하지 않거나 일부 데이터가 누락될 가능성이 있을때

그렇다면 언제 . 사용하는게 좋을까?

• 객체가 반드시 존재할 때

const obj = { name: 'Alice' };

// 반드시 name이 존재하는 경우
console.log(obj.name); // 'Alice'

// name이 존재하지 않을 수 있는 경우
console.log(obj?.name); // 'Alice' (정상)

// 무조건 옵셔널 체이닝을 사용하면 실수로 문제를 감출 수 있음
console.log(obj?.age); // undefined (의도한 것인지, 실수인지 헷갈릴 수 있음)