옵셔널 체이닝(?.)을 활용한 더 짧고 안전한 JavaScript 코드 작성법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
JavaScript 개발자, 특히 중첩 객체 또는 함수가 undefined일 수 있는 상황을 다루는 개발자
핵심 요약
- 옵셔널 체이닝(
?.)은 ES2020에서 도입된 연산자로,null또는undefined일 경우 예외를 던지지 않고undefined를 즉시 반환합니다. - 기존 방식(
if또는&&체이닝) 대신 간결한 표현식(obj?.prop)을 사용하여 코드를 안전하게 작성할 수 있습니다. - 3가지 주요 문법(
obj?.prop,obj?.[expr],func?.(args))을 활용해 속성 접근, 동적 속성 접근, 함수 호출을 안전하게 처리할 수 있습니다.
섹션별 세부 요약
1. ⚠️ The Problem (문제점)
- 기존 방법의 단점:
- 중첩된 if 또는 && 체이닝으로 인한 코드 복잡성 증가
- user.profile.settings.theme와 같은 중첩 속성 접근 시 "Cannot read property of undefined" 예외 발생 가능성
- 반복적인 null 체크로 인한 코드 가독성 저하
2. 🤔 Optional Chaining - the Solution (해결책)
- 옵셔널 체이닝 도입:
- user?.profile?.settings?.theme처럼 단일 표현식으로 중첩 속성 접근 가능
- user가 null일 경우 즉시 undefined 반환 (예외 발생 없음)
- 코드 간결성과 에러 예방을 동시에 달성
3. 🎮 Three Syntaxes (3가지 문법)
- 속성 접근:
- obj?.prop → obj가 null/undefined일 경우 undefined 반환
- 동적 속성 접근:
- obj?.[expr] → 동적 키(expr)로 속성 접근 시 null/undefined 처리
- 함수 호출:
- func?.(args) → func가 존재할 경우 실행, 존재하지 않을 경우 undefined 반환
4. 🔑 Key Difference Before & After Optional Chaining (사전/사후 차이)
- 기존 방식:
- if (user && user.profile && user.profile.settings)와 같은 중첩 조건문 필요
- && 체이닝으로 인한 코드 길이 증가 및 오류 발생 가능성
- 옵셔널 체이닝 사용:
- user?.profile?.settings?.theme처럼 단일 표현식으로 처리 가능
- 에러 없이 undefined 반환으로 안정성 향상
5. 🧐 Reference (참고 자료)
- MDN Docs: Optional Chaining(
?.)
- 공식 문서에서 옵셔널 체이닝의 구문과 사용 예시 상세히 설명
6. 🎯 Wrapping Up (요약)
- 옵셔널 체이닝은 JavaScript 개발자에게 필수적인 도구로, 코드의 짧음과 안정성을 동시에 달성할 수 있음
- ES2020부터 사용 가능하며, 모던 JavaScript 프로젝트에서 널리 적용되고 있음
결론
- 옵셔널 체이닝(
?.)을 사용해 중첩 속성 접근 및 함수 호출 시null/undefined처리를 간결하고 안전하게 수행하세요. - MDN 문서에서 구문과 예제를 확인하고, ES2020 이상의 환경에서 활용하세요.
- 코드 가독성 향상과 에러 예방을 위해 즉시 도입하는 것을 권장합니다.