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

x = a ?? b의 평과 결과는 다음과 같다.

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

// 둘다 같다.
x = a ?? b // (1)
x = (a !== null && a !== undefined) ? a : b; // (2)

let firstName = null;
let lastName = null;
let nickName = '하이?';
console.log(firstName ?? lastName ?? nickName ?? '익명'); // 하이?

?? 과 || 차이

nullish 병합 연산자는 OR연산자와 상당히 유사해보인다.
하지만 중요한 차이점이 존재한다.

• ||은 첫 번째 truthy 값을 반환한다.
• ??은 첫번째 정의된 값(defined)을 반환한다.

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

• height에 값이 정의되지 않은 경우 100이 할당된다.

height = height ?? 100; // height에 값이 정의되지 않은 경우 100이 할당된다.
-----------------------------------------------------------------

let height = 0;
console.log(height || 100); // 100
console.log(height ?? 100); // 0

• height || 100 은 height에 0을 할당했지만, 0을 falsy한 값으로 취급했기 때문에 null이나 undefined를 할당한 것과 동일하게 처리한다.
  따라서 height || 100의 평과 결과는 100이다.
• height ?? 100의 평가결과는 height가 정확하게 null이나 undefined일 경우에만 100이 된다.
  따라서 height ?? 100은 0이다.

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

연산자 우선순위

??의 우선순위는 5로 낮다.
따라서 ??은 =와 ?보다는 먼저, 대부분의 연산자보다는 나중에 평가된다.

• 복잡한 표현식 안에서 ??을 사용해 값을 하나 선택할 땐 괄호를 추가하는 것이 좋다.

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

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

// 원치 않는 결과
let area = height ?? (100 * width) ?? 50;

제약사항

• ??엔 자바스크립트 언어에서 규정한 또 다른 제약사항이 존재한다.
• 안정성 관련 이슈 때문에 ??는 &&나 ||와 함께 사용하지 못함!
  예시.

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

제약을 피하기 위해선 괄호를 사용해야 한다.

let x = (1 && 2) ?? 3; // 제대로 동작
alert(x); // 2

요약

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

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

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