[JaveScript] nullish 병합 연산자 '??'

* 최근에 추가된 문법 *

 

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

예를 들어 a ?? b의 평과 결과

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

x = a ?? b

// 위 코드와 같은 코드
x = (a !== null && a !== undefined) ? a : b;

이런 식으로 변수가 여러 개 있을 경우 값이 정해진 변수를 간편하게 찾아낼 수 있다.

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

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

 

- '??'와 '||'의 차이

두 연산자는 비슷하면서도 중요한 차이가 있다.

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

let height = 0;

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

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

따라서 height || 100 은 100이다.

height ?? 100은 height 가 정확하게 null 이나 undefined일 경우에만 100이 출력된다. 예시는 height에 0 이라는 값을 할당했기 때문에 0 이 출력된다.

이런 특징 때문에 높이처럼 0이 할당 될 수 있는 변수를 사용해 개발 할 경우에는 ||보다 ??가 적합하다.

 

- 연산자 우선순위

??의 연산자 우선순위는 5로 꽤 낮은 편이다.

??는 =와 ?보다는 먼저, 대부분 연산자보다는 나중에 평가되기 때문에 복잡한 표현식 안에서 괄호를 추가하는게 좋다.

 

- 연산자 제약사항

: 안정성 관련 이슈때문에 ??는  &&나 ||와 함께 사용하지 못한다.

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

// 괄호를 사용하면 제대로 작동함
let x = (1 && 2) ?? 3; // 제대로 동작합니다.

alert(x); // 2