[새로운 기능] null coalescing operator

 

null coalescing operator ??

javaScript에서는 boolean으로 평가 시 false로 간주되는 녀석들이 있는데 빈문자열, 0, false, null, undefined가 그 녀석들이다. 이 성질과 || short circuit 연산자가 합쳐지면 재밋는 결과를 얻을 수 있다. (|| 연산자는 마지막 평가 값을 반환한다.)

let falsy = ["", false, undefined, null, 0];

falsy.forEach((item) => {
    console.log(item, item ? true : false, item || "값지정 필요");
});

실행 결과 falsy의 내용은 모두가 false로 평가되기 때문에 마지막 출력 결과는 모두 "값 지정 필요"가 나오게 된다.

undefined, null은 그런가 보다 할 수 있지만 필요에 따라서는 ""이나 0, false는 이미 값이니까 이를 할당해야 하는 경우도 있지 않을까? 사실 명백히 값이 없는 경우는 undefined나 null 뿐이다!

이런 경우 사용할 수 있는 연산자가 null coalescing operator이다. 이 연산자는 ??를 사용하며 ""이나 0, false를 null 판단에서 빼준다.

falsy.forEach((item) => {
    console.log("null coalescing oper", item, item ? true : false, item ?? "값지정 필요");
});

이번에는 null이나 undefined에 대해서만 값지정 필요가 출력되는 것을 볼 수 있다.

이 기능은 falsy 한 값이 왔을 때 기본 값을 할당하는데 발생할 수 있는 논리 오류를 줄이는데 도움을 준다.

let trueOrFalse = false;
let input1 = trueOrFalse || "값누락";
let input2 = trueOrFalse ?? "값누락";
console.log(input1 == "값누락" ? "필수항목" : `${input1}을 선택하셨군요`); // 필수항목
console.log(input2 == "값누락" ? "필수항목" : `${input2}을 선택하셨군요`); // false을 선택하셨군요

let age = 0;
input1 = age || "값누락";
input2 = age ?? "값누락";
console.log(input1 == "값누락" ? "필수항목" : `${input1}살이군요`); // 필수항목
console.log(input2 == "값누락" ? "필수항목" : `${input2}살이군요`); // 0살이군요