자바스크립트 기본 - nullish 병합 연산자 ‘??’

nullish 병합 연산자 ?? 를 사용하면 여러 피연산자 중 그 값이 ‘확정되어 있는' 변수를 찾을 수 있다.

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

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

같은 기능을 하는 코드를 ?? 없이 작성하면 다음과 같다.

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

변수가 세 개 있을 때, 화면에 세 변수 중 실제 값이 있는 변수를 출력하되 세 변수 모두 값이 없다면 ‘익명의 사용자' 가 출력되도록 하는 코드를 다음과 같이 작성할 수 있다.

let firstName = null;
let lastName = null;
let nickName = 'Jenny';

alert(firstName ?? lastName ?? nickName ?? "익명의 사용자");

?? 와 || 의 차이

?? 와 || 는 기능적으로 유사해 보인다. 그러나 둘 사이에는 중요한 차이점이 있다.

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

let height = 0;

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

|| 는 첫 번째로 등장한 truthy 값을 반환하기 때문에 0, null, undefined 는 모두 falsy 값으로 간주되어 100을 출력한다.

?? 는 첫 번째로 등장한 defined 값을 반환하기 때문에 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 '??'

제약을 피하려면 괄호를 사용하면 된다.