?? js문법

평소에 사용하지만 이름을 제대로 모른채,

물음표 2개로 칭했던 ?? js문법

 

 ?? js문법 명칭은 Nullish coalescing operatior (Nullish 병합 연산자) 라고 한다.

ES6(ES2015)문법이 아닌 이후 ECMAScript11(ES2020)에 만들어진 기능이다. (참고url : ES6 이후)

 

왼쪽에 연산자가 null이거나 undefind일 때, 오른쪽 결과를 보낸다. (참고url : Nullish 병합 연산자 MDN)

const falsy = null || undefined;

const nullish_coalescing_operator = falsy ?? "잘못된 값";
console.log("nullish_coalescing_operator : , nullish_coalescing_operator);
// Expected output : "nullish_coalescing_operator :  잘못된 값"

 

 

 

아래 조건(삼항) 연산자랑 비교를 해보자면, 쓰임새가 더 확실해진다. (참고url : 조건 연산자 MDN)

const falsy = null || undefined || "" || 0 || false || NaN || -0 || 0n; 

const conditional_operator = falsy ? falsy : "잘못된 값";
console.log("conditional_operator : , conditional_operator);
// Expected output : "conditional_operator :  잘못된 값"

조건 연산자의 경우, 0, ", false 등 여러가지를 다 "잘못된 값"이라고 한다.

그러므로 실제 데이터에서 0, "", false 등을 받아 표현할 경우, 조건을 하나 더 넣어야 한다.

 

나는 Nullish 병합 연산자를 UI 화면에서 Grid, Chart에서 데이터를 뿌려줄 때 주로 사용한다.

undefind와 null 값을 나누어야할 때는 조건문을 추가한다.

 

 

 

참고로 falsy에서 -0인 값만 falsy이고, -1은 truthy다.

0n은 Number 원시 값이 안정적으로 나타낼 수 있는 최대치인 2^53-1보다 큰 정수를 표현하는 내장 객체(BigInt)인데 사용해본 적 없어서 익숙하지 않은 객체이다. (참고url : BigInt MDN)

 

 

 

조건 연산자와 마찬가지 falsy 값을 모두 "잘못된 값"이라고 표현하는 js 문법은 또 있다.

그것은Short circuit evaluation(단축 평가)을 하는  || 연산자(논리 or 연산자)와 && 연산자(논리 and 연산자)다.

 

참고로 단축 평가 계산 방식은 첫 번째 조건의 결과에 따라 두 번째 조건을 실행하지 않는 방식이다.

단축 평가 방식을 사용하는 것이 Short circuit operator(단축 평가 연산자)이다. 
이와 반대로 첫 번째, 두 번째 조건 모두 실행하는 것이 Eager operator(이저 연산자)이다. (참고url : Short circuit operator / Eager operator)

 

const falsy = null || undefined || "" || 0 || false || NaN || -0 || 0n; 

const logical_or_operator = falsy || "잘못된 값";
console.log("logical_or_operator : , logical_or_operator);  // return "잘못된 값"
// Expected output : "logical_or_operator :  잘못된 값"

const logical_and_operator = falsy && "올바른 값";
console.log("logical_and_operator : , logical_and_operator);  
// Expected output : "logical_and_operator :  0n (가장 오른쪽에 있는 값)"

 

|| 연산자는 첫번째 조건이 falsy면, "잘못된 값"을 주고, && 연산자는 첫번째 조건이 falsy면, "falsy"을 준다.

Nullish 병합 연산자와 || 연산자와 표현은 유사한거같은데 null과 undefind만 조건으로 나누지 여부에 따라 다르다.

 

 

 

이 글을 쓰게 된 이유는 내 개발코드의 오류가 있어 확인하다가 더 자세히 알고 싶은 마음에 적게 되었다.

참고로 나의 잘못된 개발코드는 아래와 같다.

const output1 = Number(output_one) ?? 0;
const output2 = Number(output_two) ?? 0;
const output3 = Number(output_three) ?? 0;

const output = output_boolean
      ? output1 + output2 + output3
      : undefined;
      
// 내 생각대로라면 output_boolean === true라면, 'output1 + output2 + output3'이 리턴되고,
// output_boolean === false라면, 'undefined'가 리턴된다.

위의 코드는 NaN을 return 한다.

그 이유는 output_one이 undefined이면 Number(output_one)은 'NaN'이고, ?? 연산자는 null과 undefined가 아닌 NaN을 그대로 내보낸다. 그럼 'NaN + NaN + NaN'은 'NaN'으로 결론난다.

 

아래 코드는 위 코드를 수정한 것이다.

const output1 = Number(output_one ?? 0);
const output2 = Number(output_two ?? 0);
const output3 = Number(output_three ?? 0);

const output = output_boolean
      ? output1 + output2 + output3
      : undefined;
      
// output_boolean === true라면, Number(output_one)이 리턴되고,
// output_boolean === false라면, Number(0)이 리턴된다.

output_one이 null이거나 undefined이면 0을 return하고, 숫자라면 그대로 숫자를 내보낸다.

그러므로 'NaN'이 return되지 않고 원하는 값을 얻을 수 있다.

 

 

 

참고로 이 외에도 표현식과 연산자에 관련된 내용이 많으니 한 번 살펴보면 좋을 것 같다. (참고url : 표현식과 연산자 MDN)