[JavaScript] 선택적 체이닝(Optional Chaining) 연산자: 코드를 더 안전하고 간결하게 만드는 방법

오늘은 JavaScript에서 여러분의 코드를 더 안전하고 깔끔하게 만들어 줄 강력한 문법 기능인 선택적 체이닝(Optional Chaining) 연산자에 대해 알아보겠습니다.

문제 상황: 중첩된 객체의 안전하지 않은 접근

JavaScript로 개발하다 보면 이런 상황을 자주 만나게 됩니다:

// 사용자 정보를 가져오는 API 응답 (사용자가 주소를 입력하지 않은 경우)
const user = {
  name: "김철수",
  email: "cheolsu@example.com",
  // address 속성이 없음
};

// 사용자의 도시를 표시하려고 시도
console.log(user.address.city); // TypeError: Cannot read property 'city' of undefined

 

위 코드는 실행 시 오류가 발생합니다. user.address가 undefined인데 여기서 .city 속성에 접근하려고 했기 때문입니다.

전통적인 해결책

이런 문제를 해결하기 위해 개발자들은 다양한 방법을 사용해왔습니다:

1. AND 연산자를 사용한 방법

console.log(user && user.address && user.address.city); // undefined

 

2. 조건문 사용

let city;
if (user && user.address) {
  city = user.address.city;
}
console.log(city); // undefined

 

3. 삼항 연산자 사용

const city = user && user.address ? user.address.city : undefined;
console.log(city); // undefined

 

이런 방식들은 작동하지만, 코드가 길어지고 가독성이 떨어집니다. 특히 객체가 더 깊게 중첩될수록 코드는 더 복잡해집니다.

선택적 체이닝 연산자 소개

ES2020에서 도입된 **선택적 체이닝 연산자(?.)**는 이 문제를 우아하게 해결합니다:

console.log(user?.address?.city); // undefined

 

끝입니다! 단 한 줄로 이전의 모든 조건 검사를 대체했습니다.

선택적 체이닝은 어떻게 작동할까요?

?. 연산자는 참조가 nullish(즉, null 또는 undefined)인 경우 오류를 발생시키는 대신 표현식의 평가를 멈추고 undefined를 반환합니다.

쉽게 말하면:

• user?.address는 user가 null이나 undefined면 undefined를 반환합니다.
• 그렇지 않으면 user.address를 반환합니다.
• user?.address?.city는 체인의 어느 부분이라도 null이나 undefined이면 안전하게 undefined를 반환합니다.

선택적 체이닝의 다양한 활용

선택적 체이닝은 객체 속성뿐만 아니라 다양한 상황에서 사용할 수 있습니다:

1. 객체 속성 접근

const city = user?.address?.city;

 

2. 배열 요소 접근

const firstFriend = user?.friends?.[0];

 

3. 함수 호출

// getAddress 메서드가 있을 수도, 없을 수도 있는 경우
const userAddress = user?.getAddress?.();

 

선택적 체이닝 + 널 병합 연산자: 완벽한 조합

선택적 체이닝 연산자는 **널 병합 연산자(??)**와 함께 사용하면 더욱 강력해집니다:

// 도시가 정의되지 않은 경우 '주소 없음' 표시
const cityDisplay = user?.address?.city ?? '주소 없음';
console.log(cityDisplay); // '주소 없음'

 

실제 사용 사례

API 응답 처리

// 복잡한 중첩 API 응답에서 데이터 추출
fetch('https://api.example.com/user/123')
  .then(response => response.json())
  .then(data => {
    // 오류 없이 안전하게 중첩된 값에 접근
    const userZipCode = data?.user?.contact?.address?.zipCode;
    console.log(userZipCode); // 값이 있으면 표시, 없으면 undefined
  });

 

Redux/상태 관리에서의 사용

// 상태에서 특정 데이터 가져오기
function getUserEmail(state) {
  return state?.users?.currentUser?.email ?? '이메일 없음';
}

 

브라우저 호환성 고려사항

선택적 체이닝은 비교적 새로운 기능이므로 구형 브라우저(특히 IE)에서는 지원되지 않습니다. 그러나 Babel과 같은 트랜스파일러를 사용하면 이전 환경에서도 안전하게 사용할 수 있습니다.

현재 지원 현황:

• Chrome 80 이상
• Firefox 74 이상
• Safari 13.1 이상
• Edge 80 이상
• IE에서는 지원되지 않음

선택적 체이닝 사용 시 주의사항

1. 과도한 사용 금지: 모든 속성 접근에 ?.를 사용하는 것은 좋은 습관이 아닙니다. 확실히 존재해야 하는 속성에는 일반 접근자(.)를 사용하세요.
2. 타입스크립트에서 더 강력함: 타입스크립트를 사용한다면 선택적 체이닝과 타입 체크를 함께 활용하면 더 안전한 코드를 작성할 수 있습니다.
3. 디버깅 어려움: 과도한 선택적 체이닝은 예상치 못한 undefined 값을 숨길 수 있어 디버깅을 어렵게 만들 수 있습니다.

결론

선택적 체이닝 연산자는 JavaScript의 가장 유용한 최신 기능 중 하나입니다. 코드를 더 간결하고 안전하게 만들어주며, 특히 외부 API나 불확실한 데이터 구조를 다룰 때 큰 도움이 됩니다.

다음 코드를 작성할 때 ?.를 기억하세요. 몇 개의 문자로 많은 버그를 예방하고 코드의 가독성을 크게 향상시킬 수 있습니다!

// 전: 복잡하고 장황한 코드
const cityName = user && user.address && user.address.city ? user.address.city : '주소 없음';

// 후: 간결하고 읽기 쉬운 코드
const cityName = user?.address?.city ?? '주소 없음';