[JavaScript] 자바스크립트 nullish 병합 연산자 '??'에 대하여

nullish 병합 연산자

다른 프로그래밍 언어를 사용하다 자바스크립트를 사용하면 특이한 연산자가 보인다.

 

alert(name ?? '홍길동' );

 

위와 같이 자바스크립트에는 '??' 연산자가 존재한다.

 

이건 nullish 병합 연산자라고 하는데, 앞의 피연산자가 null 혹은 undefined라면 뒤 피연산자를 반환하고, 그렇지 않다면 앞의 피연산자를 반환한다.

 

예를 들어

let a = null;
let x = a ?? b;	// x = b

 

위와 같이 a ?? b와 같은 식에서 a가 null 혹은 undefined라면 뒤 b를 반환하고, 그렇지 않다면 a를 반환한다.

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

 

'??' 연산자와 위 코드는 같은 동작을 한다. 즉 위와 같은 코드를 '??' 연산자 하나로 간단하게 작성할 수 있다.

 

 

활용

alert(a ?? b ?? c ?? '값이 없음');

 

위와 같이 a, b, c라는 변수 중 하나라도 값이 정해진 변수가 있다면 바로 그 변수를 반환할 것이고, 

그렇지 않다면 마지막 '값이 없음'을 반환할 것이다.

 

즉, '??' 연산자를 활용하면 여러 변수 중 '값이 정해진 변수'를 찾기 용이하다.

 

let userName = input ?? '아이유';

 

 

'??' 연산자는 어떤 값에 null 이나 undefined가 들어가지 않도록 예방할 때도 유용하다.

위와 같이 사용자로부터 입력값을 받아서 변수에 넣을 때 기본 값을 설정할 수 있다.

 

??'와 '||'의 차이

'??'와 '||' 연산자는 매우 비슷해보인다. 하지만 둘은 다음과 같이 다르다.

 

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

예를 들어

let size = 0;

alert(size || 1000);	// 1000
alert(size ?? 1000);	// 0

 

0은 falsy 한 값으로 취급하기 때문에 size || 1000의 결과는 1000이다.

 

하지만 0은 null이나 undefined는 아니기 때문에 size ?? 1000의 결과는 0이다.

 

이처럼 0이 할당될 수 있는 변수에는 '||' 보다 '??' 연산자가 적합하다.

 

 

우선순위

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

 

let total = (price ?? 1000) * (quantity ?? 50);

 

예를 들어 위와 같은 코드를 작성한다면 꼭 괄호로 '??' 연산자 식을 감싸주는 게 좋다.

 

만약 괄호가 없다면 아래와 같이 동작하며 버그가 발생할 수 있다.

let total = price ?? (1000 * quantity) ?? 50;	// quantity가 null이면 오류

 

'*' 연산자가 '??' 연산자보다 우선순위가 높기 때문에 꼭 괄호로 감싸주는게 중요하다.

 

 

주의사항

'??' 연산자는 안정성 관련 이슈로 인해 '&&' 혹은 '||' 연산자와 함께 사용할 수 없다.

 

 

---

참고

 

1. https://ko.javascript.info/nullish-coalescing-operator