nullish

나는 개발 중 값이 null이나 undefined일 때 다음과 같은 코드를 작성했었다.

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

그치만 이제 이런 코드는 nullish(??) 연산자를 통해

x = a ?? b

처럼 간단하게 작성할 수 있다.

nullish에 대해

nullish는 ??로 작성할 수 있다. 또한 nullish 결과는 다음과 같다

• a가 null도 아니고 undefined도 아니면 a
• 그 외의 경우는 b (null이거나 undefined)

nullish vs or연산자

1. nullish는 ??을 사용
   or연산자는 ||을 사용한다.

2. nullish는 정의된 값을 반환 (??앞에 오는 값)
   or연산자는 truthy값을 반환

let height = 0;

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

여기서 우리는 확인을 잘 해야한다.
0은 자바스크립트에서 false로 취급하기에 ||에서는 100을 할당받게 된다.
??에서는 null,undefined가 아니기에 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 '??'

이 이러한 제약을 피하기 위해서는 괄호()를 통해 해결할 수 있습니다.

let x = (1 && 2) ?? 3