📆 22.11.08 - Nullish coalescing operator

한눈에 보는 타입스크립트 핸드북 을 최대한 들고다니면서 용이하게 타입을 공부하려고 활용하고 있다. (오늘도 헬스장에서 하체하면서 봤어요~)

그런데 Nullish 병합 연산자라는 파트에서 Nullish라는 용어는 처음 들어보는 것 같다..
이것도 자바스크립트에서 원래 사용하던 개념인데, 모르고 지나쳐온 내 자신을 반성하면서 바로 MDN을 켜 정리해보고자 한다.

Nullish 병합 연산자

제목처럼 유식해 보이고 싶다면 병합 연산자 대신 coalescing operator를 써보도록 하자..! 여튼
HEROPY 님의 타입스크립트 Nullish 부분을 보면 이런 말씀을 하셨다.

일반적으로 논리 연산자 ||를 사용해 Falsy 체크(0, "", NaN, null, undefined를 확인)하는 경우가 많습니다.
여기서 0이나 "" 값을 유효 값으로 사용하는 경우 원치 않는 결과가 발생할 수 있는데, 이럴 때 유용한 Nullish 병합(Nullish Coalescing) 연산자 ??를 타입스크립트에서 사용할 수 있습니다.

아마 논리연산자 or을 통하여 Boolean 값을 체크 할 때, 데이터 값이 비었거나, 0인 경우를 사용하여 원치 않은 결과를 초래하는 것을 미리 막는다는 느낌인 것 같다.

Mdn 에서 Nullish coalescing operator에 대하여 자세히 정리되어있으니 이것을 보면 이해에 도움이 될지 모르겠다.

Nullish coalescing operator 는 약간 삼항연산자 느낌으로 생각하면 편하다. 아니 똑같을지도?
왼쪽 피연산자가 null or undefined 오른쪽 피연산자 return 아니면 왼쪽은 return 하는 논리 연산자이다.

null, undefined 뿐만 아니라 falsy 값에 해당할 경우에도 왼쪽 피연산자를 반환한다고 한다. 그런데 여기서 논리연산자 OR (||) 대조된다고 하니, 반대되는 특성인 듯 싶다.

대체적인 형식은 이러하다.

const x = leftExpr ?? rightExpr

그리고 &&, || 연산자와 직적접으로 결합하여 사용하면 Syntax error 에러가 일어난다고 한다. 우리가 사칙연산을 할 때, 우선순위 연산자에 () 감싸서 쓰듯, 이 또한 우선 순위를 명시하면 해결된다.

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

Optional chaining 과의 관계

Null coalescing operator 명확한 값으로 null, undefined를 처리해주고, optional chaining (?.) 은 null 혹은 undefined일 수 있는 객체의 속성에 접근할 때 유용하게 쓰인다.

아래는 MDN 의 예시이다.

function getMiscObj(){
  return {
    aNullProperty: null,
    emptyText: "", // this is not falsy
    someNumber: 42
  };
};

const miscObj = getMiscObj();

const newObj = {};
newObj.propA = miscObj.aNullProperty ?? "default for A";
newObj.propB = miscObj.emptyText ?? "default for B";
newObj.propC = miscObj.someNumber ?? 0;

console.log(newObj.propA); // "default for A"
console.log(newObj.propB); // "" (as the empty string is not null or undefined)
console.log(newObj.propC); // 42