본문 바로가기
웹개발/front-end

자바스크립트 옵셔널체이닝

by 지구별 여행자 임탱 2024. 3. 2.
728x90

자바스크립트의 옵셔널 체이닝은 객체 내의 속성에 접근할 때, 해당 속성이 존재하지 않는 경우에도 에러를 발생시키지 않고 안전하게 접근할 수 있는 기능입니다. 이를 통해 코드 작성 시 예외 처리를 간편하게 할 수 있습니다.

옵셔널 체이닝을 사용하면 객체의 속성에 접근할 때, 속성이 존재하지 않는 경우 undefined를 반환합니다. 

이를 통해 속성이 없어도 에러를 발생시키지 않고 코드를 계속 실행할 수 있습니다.
const obj = {
  nestedObj: {
    value: 42
  }
};
만약 obj 객체 내의 nestedObj객체의 `value` 속성에 접근하려면, 기존에는 다음과 같이 작성할 수 있습니다.
if (obj && obj.nestedObj && obj.nestedObj.value) {
  console.log(obj.nestedObj.value);
}

하지만 옵셔널 체이닝을 사용하면 아래와 같이 간단하게 작성할 수 있습니다.
console.log(obj?.nestedObj?.value);

옵셔널 체이닝은 속성이 중첩된 객체에 접근할 때 유용하게 사용할 수 있으며, 코드를 더 간결하게 작성할 수 있습니다. 

다만, 옵셔널 체이닝은 ES11(ECMAScript 2020)부터 도입된 기능이므로, 이전 버전의 자바스크립트에서는 지원되지 않을 수 있습니다.