[JS] 옵셔널 체이닝(Optional Chaining) 이란?

1. 개념과 도입 배경

옵셔널 체이닝은 ES2020에서 도입된 기능으로, 객체의 중첩된 속성에 안전하게 접근할 수 있게 해주는 연산자입니다.
`?.` 연산자를 사용하여 객체의 속성이나 메서드가 undefined 또는 null인 경우에도 에러 없이 안전하게 접근할 수 있습니다.

2. 기본 사용법

const user = {
  profile: {
    name: 'John Doe'
  }
};
const userName = user?.profile?.name;

3. 메서드 호출

const result = someInterface.customMethod?.();

4. 배열 접근

const value = arr?.[0];

5. 기존 방식과의 비교

5-1) 기존 방식

const zipCode = person && person.address && person.address.zipCode;

5-2) 옵셔널 체이닝 사용

const zipCode = person?.address?.zipCode;

6. 실무 활용 사례

6-1) API 응답 처리

// 고객 주문 데이터 접근
customer?.orders?.map((order) => printOrder(order));

6-2) React 컴포넌트에서의 활용

// 콜백 함수 안전하게 호출
props.onClick?.();

6-3) 중첩된 객체 데이터 처리

const studentGrade = student?.grades?.mathematics?.midterm;

7. 주의사항

7-1) 필수 속성에는 사용 지양
- 반드시 존재해야 하는 속성에 옵셔널 체이닝을 사용하면 디버깅이 어려워질 수 있습니다.

7-2) 변수 선언 필수
- 옵셔널 체이닝 앞의 변수는 반드시 선언되어 있어야 합니다.

7-3) 할당 연산에 사용 불가

// 불가능한 사용법
user?.name = "John"; // SyntaxError

7-4) 브라우저 호환성
- 구형 브라우저에서는 폴리필이 필요할 수 있습니다.

8. 장점과 단점

8-1) 장점
- 코드 가독성 향상
- 에러 방지
- 중첩 객체 접근 단순화

8-2) 단점
- 구형 브라우저 지원 제한
- 잠재적 버그 은폐 가능성
- 과다 사용 시 디버깅 어려움