모던 JavaScript 튜토리얼을 따라가면서 정리합니다.
2.12. null 병합 연산자(nullish coalescing operator) ‘??’
여러 피연산자 중 그 값이 ‘확정되어 있는’ 변수를 찾을 수 있따.
a ?? b의 평가 결과는 다음과 같다
- a가
null도 아니고undefined도 아니면a - 그 외의 경우는
b
x = a ?? b와 동일한 동작을 하는 코드는 다음과 같다.
1
x = (a !== null && a !== undefined) ? a : b;
null 병합 연산자 ??를 사용하면 값이 정해진 변수를 간편하게 찾아낼 수 있다.
1
2
3
4
5
6
let firstName = null;
let lastName = null;
let nickName = "Supercoder";
// null이나 undefined가 아닌 첫 번째 피연산자
alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder
??와 ||의 차이
||는 첫 번째truthy한 값을 반환한다.??는 첫 번째 정의된(defined) 값을 반환한다.
||의 첫번째 피연산자가 0이면 0이 falsy한 값이기 때문에 null이나 undefined를 할당한 것과 동일하게 처리한다. 이런 특징 때문에 높이처럼 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||보다 ??가 적합하다.
연산자 우선순위
??의 연산자 우선순위는 5로 낮다. 따라서 =와 ?보다는 먼저, 대부분의 연산자보다는 나중에 평가된다. 따라서 복잡한 표현식에서 ??를 사용해 값을 하나 선택할 땐 괄호를 추가하는 게 좋다.
1
2
3
4
5
6
7
let height = null;
let width = null;
// 괄호를 추가!
let area = (height ?? 100) * (width ?? 50);
alert(area);
제약사항
안정성 관련 이슈 때문에 ??는 &&나 ||와 함께 사용하지 못한다. 제약을 피하려면 괄호를 사용해야 한다.
1
2
3
4
let x = 1 && 2 ?? 3; // SyntaxError: Unexpected token '??'
let x = (1 && 2) ?? 3; // 제대로 동작합니다.
alert(x); // 2