자바스크립트에서 옵셔널 체이닝은 객체의 중첩된 속성에 접근할 때 속성이 존재하지 않을 수 있는 경우를 처리하는 방법입니다. 그러나 때로는 null 또는 undefined 값 뿐만 아니라 빈 문자열 또는 숫자 0도 속성 값으로 사용될 수 있습니다. 이런 경우에는 Nullish Coalescing 연산자를 사용하여 적절한 기본값을 지정할 수 있습니다.

Nullish Coalescing 연산자는 ??으로 표시되며, 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환합니다. 빈 문자열 또는 숫자 0은 nullish로 간주되지 않으므로, 옵셔널 체이닝과 달리 nullish 체크를 수행할 때 유용합니다.

예를 들어, 다음과 같은 객체가 있다고 가정해봅시다.

const person = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    zip: 12345
  }
};

위의 객체에서 person.address.city의 값을 액세스하려면 옵셔널 체이닝을 사용할 수 있습니다.

const city = person?.address?.city;
console.log(city); // "New York"

옵셔널 체이닝을 사용하면 person 또는 address 속성이 없어도 오류가 발생하지 않습니다. 그러나 이 값이 null 또는 undefined 대신 빈 문자열 또는 숫자 0을 가지고 있다면 옵셔널 체이닝은 작동하지 않습니다.

이 경우에는 Nullish Coalescing 연산자를 사용하여 기본값을 설정할 수 있습니다.

const city = person?.address?.city ?? 'Unknown';
console.log(city); // "New York"

const invalidCity = person?.address?.invalidProperty ?? 'Unknown';
console.log(invalidCity); // "Unknown"

위의 예제에서 person?.address?.city ?? 'Unknown' 표현식은 person.address.city의 값이 null 또는 undefined인 경우 “Unknown”을 반환합니다. 빈 문자열 또는 숫자 0을 가질 경우에도 “Unknown”이 반환됩니다.

Nullish Coalescing 연산자를 사용하면 자바스크립트에서 옵셔널 체이닝을 더욱 안전하고 유연하게 다룰 수 있습니다. 이를 통해 코드의 가독성과 유지 보수성을 향상시킬 수 있습니다.

#javascript #optional-chaining