[JS] 자바스크립트에서 '??' 란?! (Nullish Coalescing Operator)

 

 

 

 

논리 연산자	의미
||	OR
&&	AND
!	NOT

 

자바스크립트에선 3가지 논리 연산자를 사용하는데, 여기에 추가로 ES2020에서 새롭게 추가된 연산자가 바로 ?? 이다. ??는 Nullish Coalescing Operator라고 불린다. null-ish한  = null한 듯한 아이를 걸러준다. 아래 예시는 "A가 null 이거나 undefined이면 B로 해라"라는 의미가 된다.

 

let choose = A ?? B

 

자바스크립트에선 많은 falsey value들이 있다. 빈 스트링 (''), 숫자 0, undefined, null, false, NaN 등이 falsey한 값에 속한다. ||을 사용하여 값을 리턴할 때 이런 falsey한 아이들은 모두 false로 구분되기 때문에 절대 선택되지 않는다.

 

이 경우들을 상대할 때 nullish coalescing operator인 물음표 두개 ??를 사용하면, ??는 null이거나 undefined인 경우에만 리턴한다.

 

OR인 ||와 비교하면 아래와 같은 결과가 나온다:

 

 

 

반면, ??를 사용했을 경우엔 undefined와 null만 걸러진다.

 

 

어떤 경우에 유용할 수 있을까? 예시를 한번 생각해보자. money 만큼의 원금으로 rate 만큼의 이자를 받았을 때 총 금액이 어떻게 되는지 계산하는 아주 단순한 함수를 만들어보자. purpose는 돈을 투자하는 목적이다.

 

function calculatingInterest(money, rate, purpose) {
  const total = money * (1 + rate);
  console.log (`${money} will become ${total}. This is for ${purpose}.`)
}

 

원금이 100달러이고  5%의 이자를 생각했을 때, 아래와 같이 나온다:

 

 

 

 

그런데 만약에 실수로 데이터를 잘못 입력했다고 쳐보자.

 

 

 

이자는 실수가 아닐 수도 있다. 예를 들어 투자가 실패해서 이득은 하나도 못보고 원금만 그대로 남게 된 것이다. 그리고 그 번 돈으로 뭘할지 목표는 실수로 적지 않았다.

 

 

보통 이런 경우를 미리 예방하기 위해 우리는 calculatingInterest 함수 자체를 수정할 것이다.

 

function calculatingInterest(money, rate, purpose) {
  // 실수 대비 디폴트 값 설정
  rate = rate || 0.05;
  purpose = purpose || '... Are you kidding? The more the better.';

  const total = money * (1 + rate);
  console.log (`${money} will become ${total}. This is for ${purpose}.`)
}

 

함수를 쓸 때 argument 값을 잘못 넣을 것을 대비해서, 미리 디폴트로 값을 적어주는 것이다. 만약 rate을 제대로 적으면 그 값으로 나가고, 그 값이 잘못 적혔을 경우엔 0.05인 디폴트 이자로 계산이 된다. 또한, 목적을 적는 것을 까먹었다면 디폴트 문구가 나오게 설정된다.

 

 

 

 

그런데 여기서 문제는, 만약 0의 이자율이 의도한 것이었을 경우에 발생한다. 정말 그 어떤 수익도 나지 않아서 0이라고 적었는데, 숫자를 잘못 적었을 경우에 대비하여 적어놓은 코드 때문에 5% 이자율이 자동으로 계산되어 나오는 것이다. 이런 경우에 ??를 사용할 수 있다.

 

function calculatingInterest(money, rate, purpose) {
  // 실수 대비 디폴트 값 설정
  rate = rate ?? 0.05;
  purpose = purpose ?? '... Are you kidding? The more the better.';

  const total = money * (1 + rate);
  console.log (`${money} will become ${total}. This is for ${purpose}.`)
}

 

|| 대신 ??을 사용하면, null과 undefined인 경우에만 디폴트 값으로 나오기 때문에 의도된 값 0이 제대로 반영된 결과를 얻을 수 있다:

 

 

 

 

 

 

 

 

MDN: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

Nullish coalescing operator (??) - JavaScript | MDN