병합 연산자 (nullish)

📍 nullish 병합 연산자

ES11 (ECMAScript 2020), 구식 브라우저는 폴리필 필요

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

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

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

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

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

비교 연산자와 논리 연산자를 사용하여 작성 시, 코드가 길어진다.

또 다른 예시를 작성해보자. firstName, lastName, nickName이란 변수에 사용자 이름이나 별명을 저장하는데, 사용자가 아무런 정보도 입력하지 않는 케이스도 허용한다고 가정한다.

화면에 세 변수 중 실제 값이 있는 변수의 값을 출력하는데, 세 변수 모두 값이 없다면 '익명의 사용자'가 출력되도록 한다.

let firstName = null;
let lastName = null;
let nickName = '에삐';

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

📍 '??'와 '||'의 차이

nullish 병합 연산자는 OR 연산자 || 와 상당히 유사해 보인다. 실제로 위 예시에서 ??와 || 로 바꿔도 그 결과는 동일하게 출력된다.

그런데 두 연산자 사이에는 중요한 차이점이 있다.

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

null과 undefined, 숫자 0을 구분 지어 다뤄야 할 때 이 차이점은 매우 중요한 역할을 한다.

height = height ?? 100;

height에 값이 정의되지 않았을 경우, height에는 100이 할당 된다.

📍 ?? 와 || 비교

let height = 0;

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

height || 100은 height에 0을 할당했지만 0을 falsy한 값으로 취급했기 때문에 null이나 undefined를 할당한 것과 동일하게 처리된다.
height ?? 100의 평가 결과는 height가 정확하게 null이나 undefined일 경우에만 100이 된다. 예시에서는 height에 0이라는 값을 할당했기 때문에 얼럿창에는 0이 출력된다.

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