모던 JavaScript 튜토리얼을 읽고 정리하였습니다.

null 병합 연산자 ‘??’

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

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

• a가 null이나 undefined가 아니면 a
• 그 외의 경우는 b

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

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

또 다른 예시로 화면에 세 변수 중, 값이 정해진 변수의 값을 출력하는 데, 세 변수 모두 값이 정해지지 않았다면 Anonymous가 출력되도록 해보자.

let firstName = null;
let lastName = null;
let nickName = "Supercoder";

alert(firstName ?? lastName ?? nickName ?? "Anonymous");

’??’와 ‘||’의 차이

null 병합 연산자는 OR 연산자와 상당히 기능이 유사해보이는데, 두 연산자 사이에는 중요한 차이점이 있다. null 병합 연산자는 첫번째로 정의된 값(defined) 값을 반환하며, OR 연산자는 truthy 값을 반환한다는 점이다.

null과 undefined, 숫자 0을 구분지어야 하는 상황에서 이 차이점이 매우 중요한 역할을 한다.

let height = 0;

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

0은 falsy한 값이므로 height || 100의 반환하는 결과는 100이지만, height ?? 100에서 ??는 height가 정확하게 null이나 undefined일 경우에만 100을 반환하며 그 이외의 경우에는 모두 height의 값을 반환하므로 반환 값이 100이 아닌 0이 되는 것이다.

연산자 우선순위

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

let height = null;
let width = null'

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

alert(area); // 5000;

??는 안정성 관련 이슈 때문에 &&나 ||와 함께 사용하지 못한다. 아래 예시를 실행하면 문법 에러가 발생한다.

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

이 제약을 피하려면 괄호를 사용해야 한다.

let x = (1 && 2) ?? 3;
alert(x) // 2