49. 옵셔널 체이닝

Mission: 옵셔널 체이닝 주요 개념 정리

옵셔널 체이닝

개념:
프로그래밍에서 속성이나 메서드에 접근할 때, 해당 속성이나 메서드가 존재하지 않는 경우 에러를 방지하고 안전하게 접근하는 방법이다. 만약 접근하려는 객체가 null 또는 undefined인 경우, 옵셔널 체이닝은 에러 대신에 결과를 undefined로 반환하여 프로그램의 안정성을 높인다.

일반적인 접근 방법

const person = {
  name: "Alice",
  address: {
    city: "Wonderland",
  },
};
const cityName = person.address.city; // 접근 시도
console.log(cityName); // 출력: "Wonderland"

접근하려는 객체가 없을 경우

const person = {
  name: "Alice",
};
const cityName = person.address.city; // 에러 발생!
console.log(cityName);

옵셔널 체이닝 사용

const person = {
  name: "Alice",
};
const cityName = person.address?.city; // 옵셔널 체이닝
console.log(cityName); // 출력: undefined

객체의 중첩된 속성에 옵셔널 체이닝 사용

const user = {
  id: 1,
  info: {
    name: "John",
    email: "john@example.com",
  },
};
const userEmail = user.info?.email; // 옵셔널 체이닝
console.log(userEmail); // 출력: "john@example.com"

메서드 호출에 옵셔널 체이닝 사용

const person = {
  name: "Alice",
  greet: function() {
    console.log(`Hello, ${this.name}!`);
  },
};
person.greet?.(); // 옵셔널 체이닝
// 출력: "Hello, Alice!"

주의사항

1. Nullish (null과 undefined) 값만 처리

옵셔널 체이닝은 null이나 undefined 값일 때만 동작한다. 다른 falsy한 값(예: 빈 문자열, 숫자 0)의 경우에는 옵셔널 체이닝이 동작하지 않는다.

const user = {
  name: "Alice",
  email: null,
};
const userEmail = user.email?.toLowerCase(); // 옵셔널 체이닝
console.log(userEmail); // 출력: null

2. 함수 호출에 옵셔널 체이닝 적용 불가

옵셔널 체이닝은 속성에만 적용 가능하며, 함수 호출에는 적용할 수 없다.

const user = {
  name: "Alice",
};
const greet = user.greet?.(); // 에러 발생! (함수 호출에 적용할 수 없음)

3. 중첩된 옵셔널 체이닝 사용 시 주의

여러 단계의 중첩된 옵셔널 체이닝을 사용할 때, 중간에 어느 단계에서도 null이나 undefined가 반환되면 최종 결과는 undefined가 된다.

const user = {
  name: "Alice",
  address: {
    city: null,
  },
};
const cityName = user.address.city?.toLowerCase(); // 옵셔널 체이닝
console.log(cityName); // 출력: null