nullish 병합 연산자 ??

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

a ?? b의 평가는 아래와 같은데

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

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

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

또 다른 예시로 3개의 변수 중 실제 값이 들어있는 변수가 있다면, 해당 값을 출력하고 아니라면 "익명의 사용자"를 출력해본다고 할때

let firstName = null;
let lastName = null;
let nickName = "바이올렛";

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

이렇게 코드를 작성하면 nickname은 확정된값을 갖고 있으므로, 가장먼저 확정된값을 가지고 있는 nickname의 바이올렛이 출력되게 된다.

??와||의 차이

언뜻보기에 ||와 유사해 보인다, 위 코드에서 ||으로 대체해도 사실 동일한 결과가 나오기는 한다.

다만 두 연산자 차이에 중요한 차이가 있는데

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

null, undefined와 숫자 0을 구분 지어서 다뤄야할때 이 차이점이 큰 역할을 하게된다.

let height = 0;

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

참고

• https://ko.javascript.info/nullish-coalescing-operator