JavaScript의 Optional Chaining (?.)의 사용 방법

JavaScript

JavaScript의 Optional Chaining Chaining (?.)의 사용방법에 대해서 알아보자.

JavaScript의 Optional Chaining (?.)의 사용 방법

Optional Chaining (?.) 이란?

객체의 깊숙한 속성에 접근할 때, 중간에 속성이 존재하지 않으면 일반적인 접근 방식은 에러를 발생시킨다. 예를 들어, user.address.street에 접근하려고 할 때 user나 address가 존재하지 않으면 에러가 발생한다. 이러한 상황을 방지하기 위해 옵셔널 체이닝 연산자 ?.를 사용하면, 해당 속성이 null 또는 undefined인 경우에도 에러 없이 undefined를 반환한다.

Optional Chaining (?.) 사용 방법

Optional Chaining은 객체의 속성 접근, 배열 요소 접근, 함수 호출 등 다양한 상황에서 활용할 수 있다.

  1. 객체 속성 접근
const user = {
  profile: {
    name: 'Alice',
  },
};
 
console.log(user?.profile?.name); // 'Alice'
console.log(user?.address?.street); // undefined

위 코드에서 user?.profile?.name은 user와 profile이 모두 존재하므로 ‘Alice’를 출력한다. 반면, user?.address?.street는 address 속성이 존재하지 않으므로 에러 없이 undefined를 반환한다.

  1. 배열 요소 접근
const arr = [1, 2, 3];
 
console.log(arr?.[0]); // 1
console.log(arr?.[10]); // undefined

배열에서도 옵셔널 체이닝을 사용하여 존재하지 않는 인덱스에 접근할 때 에러를 방지할 수 있다.

  1. 함수 호출
const obj = {
  greet: () => 'Hello',
};
 
console.log(obj.greet?.()); // 'Hello'
console.log(obj.nonExistentMethod?.()); // undefined

존재하지 않는 메소드를 호출할 때도 옵셔널 체이닝을 사용하면 에러 없이 undefined를 반환한다.