[ES2020] Nullish Coalescing Operator (null 병합 연산자 ??)

기존 || 연산자의 한계점

function isEnabled(options) {
    return console.log(options.enabled || true)
}

isEnabled({}); // true
isEnabled({enabled: null}); // true
isEnabled({enabled: false}); // true 속성 값인 false를 인식하지 못하고 true를 반환하고 있다. 

|| 연산자는 좌항이 falsy한 경우 무조건 우항을 택한다. 하지만, 자바스크립트에서는 null, undefined뿐 아니라 false, 0, "", NaN 등 다양한 값을 falsy하게 여긴다.
또한 || 연산자는 첫 번째 truthy 값을 반환한다면(존재할 경우), ??는 첫 번째 defined value를 반환한다.

??, Nullish Coalescing Operator

여러 피연산자 중 값이 확정된, 즉 null도 아니고 undefined도 아닌 경우를 평가한다.

x = (a !== null && n !== undefined) ? a : b; // 이 삼항 연산자는 아래와 동일한 결과를 낸다. 

x = (a ?? b)

let firstName = null;
let lastName = null;
let nickName = 'developer';

console.log(firstName ?? lastName ?? nickName ?? 'Anonymous'); // developer

let hight = 0;
console.log(height || 100); // 100. 0을 falsy 값으로 취급. 따라서 null, undefined를 할당한 것과 동일하게 처리
console.log(height ?? 100); // 0. height가 정확히 null이나 undefined일 경우에만 100 

Node.js 14 이상부터 지원

터미널에서 node.js 상에서는 ??을 인식하지 못하길래 찾아보니 14부터 지원한다고 한다. 윈도우의 경우에는 직접 홈페이지에 가서 다운 받아 업데이트를 진행해야 했다.

Tips

• 0이 할당될 가능성이 있는 기능 개발 시에는 ?? 을 || 대신 사용하면 좋다.

• 연산자 우선순위 5로 낮으므로 사용 시 괄호를 적절히 묶어 사용한다.

• ??는 &&이나 ||와 함께 사용하지 못한다. -> 괄호로 묶어 해결할 수 있다.

• 마찬가지로 ES2020에 도입된 ?. 연산자와 함께 쓸수록 막강해진다.

참고

www.daleseo.com/js-nullish-coalescing/

ko.javascript.info/nullish-coalescing-operator