글 작성자: 망고좋아
반응형

🎯 타입스크립트 null 병합 연산자 (Nullish Coalescing Operator)

  • null 병합 연산자
  • 사용법 : A ?? B
    • es2020에서 추가된 문법이며 좌항이 null, undefined인 경우에만 B를 리턴한다.
    • null, undefined를 제외한 falsy 값을 그대로 리턴 하고 싶은 경우 사용한다.
  • 기존의 A || B는 A가 falsy 한 값(0, ‘’, -0, NaN 등)인 경우 B를 반환한다.

 

📝 Default 값을 정의할 때 :: ||를 쓰는 경우와 ??를 쓰는 경우

📕 OR(||) 사용

// price가 0인 경우 -1 반환
function getPrice(product: { price?: number }) {
    return product.price || -1;
}
  • price가 0인 경우 -1 반환
  • 문제점 : price가 0일 때도 있는데 || 연산자로 인하여 -1을 반환한다.

 

📕 ?? 사용

// price가 0인 경우 0 반환
function getPrice(product: { price?: number }) {
    return product.price ?? -1;
}
  • price가 0인 경우 0 반환
  • 즉, price가 null, undefined만 아니면 falsy값을 그대로 사용한다.
반응형