[Javascript] 옵셔널 체이닝 연산자(?.)와 널 병합 연산자(??)

🍄 옵셔널 체이닝 연산자([?.], optional chaining operator)

옵셔널 체이닝 연산자(?.)를 사용하면 프로퍼티가 존재하지 않는 중첩 객체에 에러 없이 안전하게 접근할 수 있습니다.

- 출처 사이트

먼저 체이닝 연산자(.)는

참조하는 값이 nullish한 값(null 또는 undefined)이면 존재하지 않는 값에 접근한다는 이유로 에러가 발생합니다.

 

이때 옵셔널 체이닝 연산자(?.)를 사용하면

참조하는 값이 존재하지 않을 때, 에러가 발생하는 대신 undefined를 리턴합니다.

반대로 왼쪽 참조값이 nullish한 값이 아니라면 오른쪽 참조값의 결과를 반환합니다.

 

예를 들어, 아래와 같은 객체가 있을 때 

const user = { 
    name: 'Emma', 
} 

// user.cat?.name은 undefined 값
console.log('case1: ', user.cat.name);			// Error!
console.log('case2-a: ', user.cat?.name);		// undefined
console.log('case2-b: ', user?.name);			// 'Emma'

• case1) 체이닝 연산자(.)를 이용한 접근
  • 존재하지 않는 'user.cat'이라는 속성에 접근한 경우 -> 에러 발생
• case2) 옵셔널 체이닝 연산자(?.)를 이용한 접근
  • case2-a) 존재하지 않는 'user.cat'이라는 속성에 접근한 경우 -> undefined 반환
  • case2-b) 존재하는 'user.name'이라는 속성에 접근한 경우 -> 'user.name'에 해당하는 값인 'Emma' 반환

간단하게 정리하면 접근한 값이 존재하면 해당 값을 반환(체이닝 연산자처럼)하고, 존재하지 않는다면 undefined를 반환합니다.

옵셔널 체이닝 연산자의 등장 배경과 더 자세한 내용은 다음 링크를 참고해주세요

 

---

🍄 널 병합 연산자([??], nullish coalescing operator)

널 병합 연산자는 왼쪽 표현식이 nullish 한 값(null 또는 undefined) 일 때 오른쪽 표현식을 반환하고, 그렇지 않으면 왼쪽 표현식을 반환하는 논리 연산자입니다.

- MDN web docs

 

바로 예시를 보겠습니다. 위에서 예시로 사용했던 것과 같은 객체가 있을 때

const user = { 
    name: 'Emma', 
} 

// user.cat?.name은 undefined 값
const result = (user.cat?.name) ?? '고양이가 없습니다..'

console.log(result);		// '고양이가 없습니다..'

• 'user.cat'이라는 속성은 존재하지 않기 때문에 user.cat?.name은 undefined를 반환합니다.
• 왼쪽 표현식이 undefined를 반환했기 때문에 널 병합 연산자(??)는 오른쪽 문장인 '고양이가 없습니다..'를 반환하고
• 최종적으로 result의 값은 '고양이가 없습니다..'가 됩니다.

널 병합 연산자에 대한 더 자세한 내용은 다음 링크를 참고해주세요

 

---

🍄 활용 예시

옵셔널 체이닝 연산자와 널 병합 연산자를 프로젝트에서 활용했던 경우는 서버에서 사용자 프로필 데이터를 받아와 사용하는 경우였습니다.

 

두 연산자가 활용된 코드를 예시로 보겠습니다.

const [newProfile, setNewProfile] = useState<ProfileContentsTypes>({
  image: userInfo?.image ?? null,
  nickname: userInfo?.nickname ?? '',
  description: userInfo?.description ?? '',
})

특정 사용자의 프로필을 상태로 관리하기 위해 초기값을 지정해주는 상황입니다.

image만 자세히 살펴보겠습니다.

• [userInfo?.image]
  • userInfo 객체가 존재한다면 해당 객체에 저장되어 있는 사용자의 프로필 이미지인 'image'값을 반환합니다.
  • userInfo 객체가 존재하지 않는다면 undefined를 반환합니다. 
• [?? null]
  • userInfo?.image = image 라면 userInfo.image를 반환하고, 해당 값으로 초기화됩니다.
  • userInfo?.image = undefined 라면 null를 반환하고, null로 초기화됩니다.

nickname과 description 또한 image와 같은 흐름으로 초기값이 정해집니다.

 

---

읽어주셔서 감사합니다:)