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

 
 
nullish 병합 연산자 '??'를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어 있는' 변수를 찾을 수 있다.
 
a ?? b의 평과 결과는 다음과 같다.
 
1) a가 null도 아니고 undefined도 아니면 a
2) 그 외의 경우 b
 
?? 없이 이와 동일한 동작을 코드를 작성하면 아래와 같다.

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

 
이럴 때 ?? 연산자를 사용하면 값이 정해진 변수를 간편하게 찾아낼 수 있다.
 
 

---

 
 

??와 ||의 차이

 
nullish 병합 연산자는 언뜻 or 연산자 ||와 비슷해 보인다. 그러나 두 연산자 사이에는 중요한 차이점이 있다.
 
1) ||는 첫 번째 truthy 값을 반환
2) ??는 첫 번째 정의된 값을 반환
 
null과 undefined, 숫자 0을 구분지어 다뤄야 할 때 이 차이는 아주 중요한 역할을 한다.
 

height = height ?? 100;

 
height에 값이 정의되지 않은 경우 height에는 100이 할당된다.
이제 ??와 ||을 비교해 보자.
 

let height = 0;

console.log(height || 100);	// 100 -> (A)
console.log(height ?? 100);	// 0 -> (B)

 
(A)에서는 height에 0을 할당했지만 0을 falsy한 값으로 취급했기 때문에 null이나 undefined를 할당한 것과 동일하게 처리한다. 따라서 그 결과는 100이 된다. 반면 (B)에서는 height가 null이나 undefined인 경우에만 100이 된다. 그러나 height에는 0을 할당했기 때문에 그대로 0이 출력된다.
 
이러한 특징 때문에 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||보다 ??가 적합하다.
 
 

---

 
 

연산자 우선순위

 
??의 연산자 우선순위는 5로 꽤 낮다. 따라서 =와 ?보다는 먼저, 대부분의 연산자보다는 나중에 평가된다. 따라서 복잡한 표현식 안에서 ??를 사용해 값을 하나 선택하려는 경우 괄호를 추가하는 게 좋다.
 

let height = null;
let width = null;

let area1 = (height ?? 100) * (width ?? 50);
console.log(area1);	// 5000

let area2 = height ?? 100 * width ?? 50;
console.log(area2);	// 0

 
 
연산자 우선순위의 영향으로 인해 위 예시에서 area2는 원치 않는 결과를 출력한다. 결국 area2는 아래와 같이 동작하는 것이다.

let area2 = height ?? (100 * width) ?? 50;

 
 
 
 

---

 
 

제약 사항

 
??에는 자바스크립트 언어에서 규정한 또 다른 제약이 있다. 안정성 관련 이슈 때문에 ??는 &&이나 ||와 함께 사용하지 못한다. 따라서 아래 코드를 실행하면 문법 에러가 발생한다.
 

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

 
이러한 제약은 개발자들이 ||를 ??로 바꾸기 시작하면서 만드는 실수를 방지하기 위해 추가된 것으로, 이를 피하기 위해서는 괄호를 사용하면 된다.
 

let x = (1 && 2) ?? 3; 
console.log(x); // 2