nullish 병합 연산자 ?? 에 대하여

nullsih 병합 연산자( ?? ) 는 논리 연산자로 왼쪽 피연산자가 null 이거나 undefined일 경우 오른쪽 피연산자를 반환하고 그렇지 않을 경우 왼쪽 피연산자를 반환한다.

null ?? 'hello' // 'hello'

undefined ?? 'hello' // 'hello'

'hi' ?? 'hello' // 'hi'

 

---

OR 연산자 '||' 와의 차이점

1. OR( || ) 는 왼쪽 피연산자가 false로 평가되는 경우 오른쪽 피연산자를 반환한다.

 

2. false로 평가되는 값으로 null, undefined, 빈문자열 '', 0 등이 있다.

'' ?? 'hello' // ''
'' || 'hello' // 'hello'

 0 ?? 100 // 0
 0 || 100 // 100

 

 

다음 예시를 보자

1. 조건에 일치할 경우 포인트를 계산한다.

 

2. totalPoint에 값을 할당할 때 point가 없을 경우 기본 값으로 1000을 주려고 한다.

let point;
        
    if(조건) {
    	// 계산 로직
        point = 0;
    }
        
const totalPoint = point ?? 1000;

 

3. if 조건을 탄 계산 로직에서 point가 0일 경우 0이 들어가길 원하는데 1000이 들어가는 의도치 않은 경우가 발생한다.

 

4. 이럴 때는 OR ( || ) 연산자를 사용한다.

 

---

 

연산자 우선순위

1. nullish 병합 연산자는 연산자 우선순위가 다섯 번째로 낮으며, OR ( || ) 보다는 바로 낮고 조건(삼항) 연산자보다는 바로 높다.

let point = null;
let discount = null;

const totalPoint = point ?? 1000 * discount ?? 100;

 

2. 1000 * discount가 먼저 실행되어 다음과 같아진다.

 

3. 참고로 null은 숫자와 연산할 때 0으로 변환된다.

null ?? 0 ?? 100 // 0

 

4. 원하는 결과를 얻으려면 다음과 같이 한다.

( point ?? 1000 ) * ( discount ?? 100 )

 

nullish 병합 연산자는  AND ( && ), OR ( || ) 연산자와 함께 사용할 수 없다.

null || undefined ?? 'hello'; // raises a SyntaxError
true && undefined ?? 'hello'; // raises a SyntaxError

 

괄호를 사용하면 문제가 해결된다.

(null || undefined) ?? 'hello' // 'hello'