[JavaScript] 옵셔널 체이닝(Optional Chaining) 완벽 가이드

1. 개요

중첩된 객체나 배열, 함수 호출 과정에서 null 또는 undefined로 인한 TypeError를 방지하기 위해 옵셔널 체이닝이 도입되었다. 언어 차원에서 제공되는 안전한 접근 방식으로, 코드의 중복을 줄이고 직관적인 표현을 가능하게 한다

---

2. 사용법

2-1. 기본 문법

// 객체의 프로퍼티 접근
const user = { profile: { name: "Alice" } };
const userName = user.profile?.name; // "Alice"
const age = user.profile?.age;       // undefined

위 예제에서 profile이 존재하지 않으면 user.profile?.name은 undefined를 반환한다.

2-2. 메서드 호출

const api = { fetchData: () => { /*...*/ } };
api.fetchData?.(); // 함수 존재 시 호출, 아니면 undefined 반환
api.saveData?.();  // 함수가 없으므로 undefined 반환

함수 호출에도 동일하게 적용되어, 존재 여부를 안전하게 확인할 수 있다.

2-3. 배열 요소 조회

const list = [ { id:1 }, null, { id:3 } ];
const secondId = list[1]?.id; // undefined

배열 인덱스 접근에도 옵셔널 체이닝을 적용할 수 있다.

2-4. 동적 프로퍼티 접근

const key = "name";
const obj = { user: { name: "Bob" } };
const name = obj.user?.[key]; // "Bob"

대괄호 표기법과 결합하면 동적 키 접근에도 안전성을 제공한다

---

3. 활용 예제

3-1. 중첩 객체 안전 접근

const data = { a: { b: { c: 42 } } };
console.log(data.a?.b?.c); // 42
console.log(data.x?.y?.z); // undefined

중첩 깊이가 깊어져도 안전하게 값을 조회할 수 있다.

3-2. API 응답 처리

fetch("/user")
  .then(res => res.json())
  .then(json => {
    const city = json.address?.city;
    console.log(city);
  });

서버 응답에서 특정 필드가 없을 때에도 예외 없이 처리할 수 있다.

3-3. 함수 체이닝

const result = getUser()?.getProfile?.()?.name;

함수 반환값이 객체이고, 그 객체의 메서드를 연이어 호출할 때 유용하다.

---

4. 주의사항

4-1. 브라우저 호환성

옵셔널 체이닝은 Chrome 80+, Firefox 74+, Safari 13.1+, Edge 80+에서 지원되며, IE는 지원하지 않는다.

4-2. 폴리필

구형 브라우저 대응이 필요할 경우, Babel 등의 트랜스파일러 설정을 통해 폴리필을 적용해야 한다.

4-3. 다른 연산자와 조합

Nullish Coalescing(??)과 함께 사용해 기본값을 지정하거나, 논리 연산자(&&/||)와 결합해 조건부 동작을 구현할 수 있다:

const name = user.profile?.name ?? "Unknown";

이처럼 다중 연산자를 조합해 더욱 직관적인 코드를 작성할 수 있다.

---

5. 결론

옵셔널 체이닝은 현대 자바스크립트에서 null/undefined에 대한 안전한 프로퍼티 접근과 메서드 호출을 보장하는 강력한 도구이다. 기존의 번거로운 null 검사를 제거하고 코드 가독성을 향상시켜 개발 생산성을 높일 수 있다. 다만 호환성 이슈를 고려해 적절한 폴리필 및 트랜스파일링 설정이 필요하다.