[javascript] nullish 병합 연산자 '??'

nullish 병합 연산자(nulish coalescing operator) ?? 를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어있는' 변수를 찾을 수 있습니다.

 

a ?? b 의 결과는 다음과 같습니다.

• a 가 null 도 아니고 undefined도 아니면 a
• 그 외의 경우는 b
  
  

nullish 병합 연산자 ?? 없이 x = a ?? b 와 동일한 동작을 하는 코드를 작성하면 다음과 같습니다.

x = (a !== null && a != undefined ) ? a : b ;

 

'??'와 '||' 의 차이

nullish 병합 연산자는 OR 연산자 || 와 상당히 유사해 보입니다. 

그러나, 두 연산자 사이에는 중요한 차이점이 잇습니다.

• ||는 첫 번째 truthy값을 반환합니다.
• ??는 첫 번째 정의된(defined) 값을 반환합니다.
  
  

null 과 undefined, 숫자 0을 구분 지어 다뤄야 할 때 이 차이점은 매우 중요한 역할을 합니다.

height = height ?? 100;

height에 값이 정의되지 않은 경우 height엔 100이 할당됩니다.

이제 ??와 ||을 비교해봅시다.

let height = 0;


alert (height || 100);
alert (height ?? 100);

height || 100 은 height 에 0 을 할당했지만 0 을 falsy 한 값으로 취급했기 때문에 null이나 undefined를 할당한 것과 동일하게 처리합니다. 따라서 height || 100 의 평가는 100 입니다.

반면 height ?? 100 은 height가 정확하게 null 이나 undefined일 경우에만 100이 됩니다. 예시에선 height에 0이라는 값을 할당했기 때문에 alert창에는 0이 출력됩니다.

 

이런 특징 떄문에 높이처럼 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||보다 ??가 적합합니다.

 

연산자 우선순위

??의 연산자 우선순위는 5로 꽤 낮습니다.

따라서 ??는 =와 ? 보다는 먼저, 대부분의 연산자보다는 나중에 평가됩니다.

그렇기 때문에 복잡한 표현식 안에서 ??를 사용해 값을 하나 선택할 땐 괄호를 추가하는 게 좋습니다.

 

let height = null;
let width = null;


//괄호를 추가
let area = (height ?? 100) * (width ?? 50);


alert(area); // 5000

그렇지 않으면 * 가 ??보다 우선순위가 높기 때문에 *가 먼저 실행됩니다.

 

??엔 자바스크립트 언어에서 규정한 또 다른 제약사항이 있습니다.

안정성 관련 이슈 때문에 ??는 &&나 ||와 함께 사용하지 못합니다.

let x = 1 && 2 ?? 3; //SyntaxError : Unexpected token '??'

이 제약을 피하려면 괄호를 사용해야 합니다.

 

let x = (1 && 2) ?? 3;

요약

• nullish 병합 연산자 ?? 를 사용하면 피연산자 중 '값이 할당된' 변수를 빠르게 찾을 수 있습니다.
  ??는 변수에 기본값을 할당하는 용도로 사용할 수 있습니다.

  //height 가 null이나 undefined인 경우, 100을 할당
  height = height ?? 100;

• ??의 연산자 우선순위는 대다수의 연산자보다 낮고 ?와 =보다는 높습니다.
• 괄호 없이 ??를 ||나 &&와 함께 사용하는 것은 금지되어 있습니다.

 

 

 

출처 : https://ko.javascript.info/nullish-coalescing-operator

nullish 병합 연산자 '??'