1. null 병합 연산자 [ ?? ]

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

상황에 따른 a ?? b의 평가 결과

• a 가 null 이나 undefined 가 아니면 a
• a 가 null 이나 undefined 이면 b

null 병합 연산자 [ ?? ] 를 사용하지 않고 만든
x = a ?? b와 동일하게 동작하는 코드는 다음과 같다.

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

길이가 길어진다.

또 다른 예시

firstName, lastName, nickName 이란 변수가 있는데 이 값들은 모두 옵션 값이라 한 후,
실제 값이 들어있는 변수를 찾고 그 값을 보여줘 본다. (모든 변수에 값이 없다면 익명을 출력).

let firstName = null;
let lastName = null;
let nickName = "바이올렛";
// null 이나 undefined 가 아닌 첫 번째 피연산자
alert(firstName ?? lastName ?? nickName ?? "익명"); // 바이올렛

2. [ ?? ] 와 [ || ] 의 차이

null 병합 연산자는 OR 연산자 || 와 상당히 유사해 보인다.
실제로 위 예시에서 ?? 를 || 로 바꿔도 그 결과는 동일하다.

[ ?? ] 와 [ || ] 의 차이점

• || 는 첫 번째 truthy 값을 반환한다.
• ?? 는 값이 정의되어있는 첫 번째 값을 반환한다.

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

height = height ?? 100;

height 에 값을 정의하지 않은 상태라면 height엔 100이 할당된다.
그런데 height에 0이 할당된 상태라면 값이 바뀌지 않고 그대로 남아있다.

[ ?? ] 와 [ || ] 비교

let height = 0;
alert(height || 100); // 100
alert(height ?? 100); // 0

height || 100 은 height 에 0 을 할당했지만 0 을 falsy 한 값으로 취급했기 때문에
null 이나 undefined 를 할당한 것과 동일하게 처리한다.

높이에 0 을 할당하는 것과 유사한 유스케이스에선 [ || ]는 부정확한 결과를 일으킬 수 있다.

대신 height ?? 100 은 height 가
정확히 null 이나 undefined 일때만 height에 100을 할당한다.

3. 연산자 우선순위

[ ?? ] 의 연산자 우선순위는 7로 꽤 낮다.
대부분의 연산자보다 우선순위가 낮고, [ = ] 와 [ ? ] 보다는 조금 높다.
따라서 복잡한 표현식 안에서 [ ?? ] 를 사용할 땐 괄호를 추가해주는 게 좋다.

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

본문 : https://ko.javascript.info/nullish-coalescing-operator