Optional Chaning(?.)

프론트 개발을 하다보면 undefinded 에러가 자주 발생하는데, 이 경우 객체에 존재하지 않는 속성에 접근할 때 발생한다. ?. 의 경우 속성이 null or undefined 일 경우 에러를 발생시키지 않고 대신 undefined 를 반환한다.

기본 사용법

Optional Chaining은 속성 접근(obj.property), 배열 인덱싱(arr[0]), 함수 호출(func())) 시에 사용할 수 있습니다.

속성 접근: obj?.property
배열 인덱싱: arr?.[index]
함수 호출: func?.()

예시

const person = {
  name: "John",
  address: {
    street: "123 Maple Street",
    city: "Anytown"
  }
  // contact 정보는 없음
};

// 전통적인 접근 방식
console.log(person.contact.email); // TypeError: Cannot read properties of undefined

// Optional Chaining 사용
console.log(person.contact?.email); // undefined

// 배열에서 Optional Chaining 사용
const arr = [1, 2, 3];
console.log(arr[3]?.toFixed(2)); // undefined, 에러 발생 없음

// 함수 호출에서 Optional Chaining 사용
const obj = {
  myFunc: () => console.log("Hello, World!")
  // 함수가 있을 수도 있고, 없을 수도 있음
};
obj.myFunc?.(); // 함수가 존재하면 실행됨. 없으면 아무 일도 일어나지 않음