프론트엔드/javascript

널 병합 연산자 패턴, nullish 병합 연산자 패턴

lika-7 2023. 11. 6. 20:41

안녕하세요 lika-7입니다

이번시간에는 널 병합 연산자 패턴을 정리하겠습니다.

널 병합 연산자 패턴이란

?.와 || 연산자를 함께 사용하여 널(null) 또는 언디파인드(undefined) 값에 대한 안전한 처리를 수행하는 패턴입니다.

예시

const list = currentUser?.favoriteIds || []

이 코드는 currentUser 객체에서 favoriteIds 프로퍼티를 가져오려고 시도하며, 만약 currentUser가 존재하지 않거나 favoriteIds가 존재하지 않는 경우, 빈 배열([])을 할당합니다.

  1. currentUser 객체가 존재하고 favoriteIds 프로퍼티가 존재하는 경우, currentUser.favoriteIds를 사용하여 해당 값을 할당합니다.
  1. currentUser 객체가 존재하지만 favoriteIds 프로퍼티가 없는 경우, optional chaining(?.)을 사용하여 currentUser.favoriteIds를 가져오려고 시도합니다. 그러나 favoriteIds가 없기 때문에 값은 undefined가 됩니다.
  1. 이때 undefined가 "falsy" 값으로 간주되므로, currentUser?.favoriteIds가 undefined면 || 연산자 뒤의 값인 [] (빈 배열)을 할당합니다.