[JS] nullish 병합연산자 '??'에 대한 설명 및 사용방법 ( feat. OR연산자와 비교 )

 

 

 

nullish 병합연산자란?

 

Nullish 병합(??) 연산자는 왼쪽 피연산자가 null or undefined일 때 오른쪽 피연산자를 반환하고

그렇지 않으면 왼쪽 피연산자를 반환하는 논리연산자입니다.

 

보통 우리는 OR을 의미하는 '||'연산자를 사용하는데

이 연산자의 문제점은 왼쪽 피연산자가 boolean으로 true/false를 체크하기 때문에 0이나 ""와 같은 빈값을

그대로 출력하고 싶어도 출력하지 못하는 상황이 발생하기도 한다.

 

 

샘플코드

 

기본사용법

const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

 

 

Nullish병합연산자(??) VS OR(||)연산자 비교 코드

//OR(||)연산자를 사용한 경우
const foo1 = null || "default string";
console.log(foo1);
// expected output: "default string"

const baz1 = 0 || 42;
console.log(baz1);
// expected output: 42

//병합연산자를 사용한 경우
const foo2 = null ?? "default string";
console.log(foo2);
// expected output: "default string"

const baz2 = 0 ?? 42;
console.log(baz2);
// expected output: 0

 

위 코드를 보면 null인 경우에는 오른쪽의 피연산자를 return한다.

문제는 0이나 빈값("")인 경우인데, OR(||)연산자인 경우에는 0을 false로 판단하기 때문에

'42'를 리턴하는 것을 확인 할 수 있다.

 

하지만 Nullish 병합연산자(??)를 사용하는 경우에는 0이나 빈값("") 또한 true로 판단하기 때문에

'0'을 리턴하는 것을 확인 할 수 있다.

 

 

Nullish 병합연산자(??)를 || , &&와 같이 사용할 때는 괄호를 주어 명시적으로 우선순위를 주어야 한다.

null || undefined ?? "foo"; // raises a SyntaxError

(null || undefined) ?? "foo"; // returns "foo"

 

 

참고할 점은 이 친구 ES2020에 추가 된 친구라서 구형 브라우저에서는 지원이 안될 수도 있다. 끝

 

 

 

참조 : https://zzang9iu.tistory.com/98

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